I am getting a lot of widgets groups in the tree and wanted to start extracting them to their own widget.
I tried with Ctrl-Alt-W, this command does nothing and shows no error when there is a problem.
If you go to the top menu and click on refactor, extract, extract to widget the following error occurs:
Can only extract a widget expression or a method returning widget.
This is an example of the code I am trying to extract:
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.only(
left: 8.0,
right: 8.0,
top: 8.0,
bottom: 4.0),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
filled: true,
hintStyle: new TextStyle(
color: Colors.grey[800]),
hintText: "Supervisor",
fillColor: Colors.white70),
),
),
),
),
How would I modify this code in the widget tree to have a return so that it can be easily extracted.
Thanks
I don't think this is a bug. Everyone says that you have to highlight all of the code to extract it, and it worked with them, but for me, I've made it like this.
First I put the cursor at the specific widget.
Ensure Two Steps:
Your Code is 'Dart Formatted' (if using AndroidStudio, else regular formatted with appropriate commas if using VSCode), and
Your Cursor is at the beginning of the widget code block that you want to extract as a widget. Cursor position is the only problem here. Even after selecting the entire code block, if we right click while cursor is somewhere in the middle of the code block, refactoring and widget extraction wont work.
Dont select the block, only ensure that cursor is at the first letter of the block. Then -> right click -> refactor -> extract widget and voila! It will work. Thanks. Happy Coding!
Related
I tried to build a small application with flutter.
I know how all the log things work in flutter I understand the logical concepts really good (state, context, route).
But I'm really bad at styling, it frustrates me. I feel like I can not put text on an image without causing a problem (usually find in google and never do alone).
I dont know what to do. i feel so bad with styling.
what to do?
code example I built with google 95% (I'm not okay with that :( )
InkWell(
onTap: () => selectManufacturer,
borderRadius: BorderRadius.circular(20),
child: Card(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 9,
margin: EdgeInsets.all(10),
child: Stack(fit: StackFit.expand, children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
"./image.png",
),
),
Positioned(
bottom: 100,
left: 0,
child: Column(children: [
Text(
widget.name,
style: TextStyle(fontSize: 26, color: Colors.red),
),
]))
]),
));
Styling is about the only thing I am "ok" at in Flutter, lol.
Here are my tips:
When you first layout a page, start with either a Column or a Row.
Then add an Expanded widget with a Container in it with a certain Color, different from other Colors.
You can repeat steps 1 and 2 recursively -- inside existing Expanded widgets-- to "drill down" and add even more detailed layout control
The tips above let you build little colored squares that show you how your layout will be before you jump into making it more complicated. By adding different sized "flex" attributes to each Expanded, you can tweak your layout from the start, before you make it more complicated.
In the HTML/CSS world, this approximates building a page with different colored DIVs.
I hope this helps!
hello i'm new in flutter so inside a column a container then a sized box then another container and finally a button . the problem is the container which have the color amber does not show despite print is worked but i don't see the container on my screen . i wanna display a text inside that container if the email invalid any help ! thanks in advise
Container(
height: MediaQuery.of(context).size.height * 0.08,
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: const Color(0xFFEFEDED),
border: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
border: InputBorder.none,
),
),
),
),
const SizedBox(
height: 50,
),
InkWell(
onTap: () {
if (isValidEmail) {
emailsList.add(emailController.text);
box.write('emails', emailsList);
Navigator.of(context).pop();
}
if (!isValidEmail) {
Row(
children: [
Container(
color: Colors.amber,
),
],
);
print("test");
}
},
child: CustomButton("Ajouter", buttonColor, Colors.white)),
First of all, if you do not give any height or width to your container but only a color, it will never show. Why? Because it has no content meaning that the height and width by default are 0. So, I advise setting a height and width first.
Second, if you want to display a text if the field is not valid, you have something already existing. In your textField, you can give him an Inputdecoration and there you can access the parameters errorText. In order to have this working, you must use the formValidation with the widget Form and you kive him a key that is a formValidator.
Finally, if you do not want to use the errorText by default, you should put in the column something like this.
Column(
children:[
TextField(),
if (isEmailInvalid)
Text("This is the error Text")
]
)
With the "isEmailInvalid" which is a boolean.
I hope that all this information helps you. But if you have really a beginner, I advise to stick with the default setting of the TextField and take a look at the flutter documentation that is really interesting.
put a Row in Inkwell onTap? Row is not a function, you must return it in your build method.
return type of if statement must be 'Widget' . use 'return' before Container widget.
I am trying to find a way to use maxLength and put it inside of the textfield to have a nice rendering. However, I don't want to use the onChanged parameter because I would have to use a setState, but this not the good way to use it.
The parameter maxLength from the flutter's textfield is designed to do not update the state, so that every statefull widgets don't have to rebuild.
So I would like to put the 0/50 inside, at the end of the textfield, on the same line as Title.
From this :
To this :
So somebody have an idea of how to do it without using the parameter onChanged ?
Does flutter has implemented this functionality ?
Try with this, hope you get a solution.
TextField(
maxLength: 250,
buildCounter: (_, {currentLength, maxLength, isFocused}) => Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(currentLength.toString() + "/" + maxLength.toString())),
),
)
Also, Try with this,
TextField(
controller: nameController,
maxLength: 60,
prefixIcon: Icon(
Icons.account_circle,
color: Colors.black45,
),
),
I want to create a pretty DropDownButton. Unfortunately, this seems to be pretty hard. While the design is fine, whenever I want to select a different item the list drops above the selection in a very ugly way. Below is a picture of the current version.
and after:
Below is my code:
var _repeats = ["Einmalig", "Wiederholen:"];
String _initRepeat = "Einmalig";
FormField<String>(
builder: (FormFieldState<String> state) {
return Container(
decoration: BoxDecoration(
color: Color.fromRGBO(204, 204, 204, 1.0),
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0,),
child: DropdownButton<String>(
dropdownColor:
Color.fromRGBO(204, 204, 204, 1.0),
alignment: AlignmentDirectional.center,
value: _initRepeat,
isDense: true,
onChanged: (String? newValue) {
setState(() {
_initRepeat = newValue!;
state.didChange(newValue);
});
},
items: _repeats.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
color: Colors.black,
fontSize: 12.0,
),
),
);
}).toList(),
),
),
);
},
),
Does anyone have advice on how to improve this? I basically want a selection that is smooth below the currently selected value.
Thank you very much!!
I've created a custom DropdownButton from current version of Flutter's DropdownButton and made it more customizable. It's easy, simple and you can have steady dropdown menu below the button "As long as it's possible" without any issues and many other features described with the package. Also, I've added the same functionality to DropdownButtonFormField2 and added a feature of using the button as a popup menu button and the ability of adding dividers after items. I've tested it very well and it works like a charm!
You can use the package or use the source file on GitHub directly. Also, I've Added custom widget with the package you can customize default DropdownButton2 widget for your entire app and use it with few lines as shown in the examples.
Package: DropdownButton2
Repository (GitHub): DropdownButton2
This package should be your way to go: dropdown_below. It offers exactly what you are looking for.
Or you check out this answer: DropdownButton under Button itself
Basically, it gives you a complete code example of a custom DropdownButton where the Dropdown is always "under" the button itself.
I have a TextFormField with a fixed number of lines and when a screen load, this TextFormField already have more lines then a fixed number of lines that i defined,
and if i want to see the last line,
I need manually scroll it to the last line.
Is there a way to show automatically the last line of this TextFormField?
Container(
child: SingleChildScrollView(
child: TextField(
readOnly: true,
keyboardType: TextInputType.multiline,
maxLines: 9,
controller: chatController,
decoration: InputDecoration(
hintText: "Chat...",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
),
),
),
This appears to be a missing feature in the Flutter Framework, Someone has filed a bug to get it resolved: https://github.com/flutter/flutter/issues/9365
However site includes a work around. Please have a look at it.
make this public variable:
ScrollController scrollController = new ScrollController();
attach it to the TextField
TextField(
//...
scrollController: scrollController,
//...
),
put this into your initState function:
WidgetsBinding.instance.addPostFrameCallback((_) async {
scrollController.jumpTo(double.parse((9 * 17 * 1.9 /*number of lines * fontSize * 1.9 (you can of course experiment with this values)*/).toStringAsFixed(1)));
});
i hope it helped