I'm new on flutter and i have a problem.
When i click on the textformField, this one disappears
I put in red the container but normaly it's transparent
I put a stack, then in the background the GoogleMap which is extend. And to have a research effect I put an overlay with the textformfield and I will have specific filter buttons instead of the yellow and green.
The problem is that when I click on the textformfield, it disappears from the screen.
I tried to play with the SingleChildScrollView, ListView, but I still have errors especially because of GoogleMap which takes up all the space
Everything is contained by a Scaffold
Can you help me please, where to give me a solution?
I enclose the code below
cordially
return Stack(
children: [
/// GoogleMap
Column(
children: [
Expanded(
child: GoogleMap(initialCameraPosition: _kInitialPosition),
),
],
),
/// Search Bar And Filter
Positioned.fill(
bottom: _searchBarContainer,
child: SafeArea(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Row(
children: [
/// Search Bar
Expanded(
child: TextFormField(
decoration: DesignWidget.inputDecorationTexFieldMap(
_searchBarMap, Icons.search),
),
),
/// Filter
Container(
width: _filterContainer,
color: Colors.green,
child: Row(
children: [
Container(
color: Colors.yellow,
width: _filterContainer / 2,
),
Container(
color: Colors.green,
width: _filterContainer / 2,
)
],
),
),
],
),
),
),
),
),
],
);
simply user this pakage [material_floating_search_bar: ^0.3.4]
I think before you use textFormField you either have to define a key or controller.....it happens when you don't define an instance of controller and use that controller inside of textFormField controller.
Okay i found the solution
I need to add (to Scallfold) : resizeToAvoidBottomInset: false
Related
I am trying to create a horizontal bar that grows in colour strength given the numbers supplied to it in a flutter app. Does anyone have an idea?
You can use row with Expanded and Text
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 10,
child: LinearProgressIndicator(
value: 200 / 425, //current / max
backgroundColor: Colors.blue.shade100,
color: Colors.blue,
),
),
),
),
Text("value")
],
),
Also you can use stack().
First make bar then on the top put Text() or what ever you want
I want to create a custom text field in flutter like shown in the picture. Outlined TextField border with label and icon in the middle of the border line.
Is there any way to create such TextField?
Thank in advance.
You can use stack to achieve the UI
Stack(
children: [
TextFormField(
...apply the border here
),
Positioned(
left: 16.0,
top: 5.0,
child: Container(
padding: EdgeInsets.all(5.0),
color: AppColors.whiteColor,
child: Row(
children: [
Image.asset(your_image),
Text("Name")
],
),
),
),
],
);
I'm trying to have a UI in such a way that the number of buttons in a row changes depending on available information. More specifically, there will always be one FlatButton that links to an external page, but if a download link is also provided, then there will be a second FlatButton in the row.
On the website that currently exists, we have this working for one button versus two buttons, but I can't get the one button to horizontally expand to fill the available space.
At the moment, I add the FlatButtons to a List<Widget> variable that I pass as the children for a row. I have tried using Flex -> Expanded, SizedBox.expand, CrossAxisAlignment.stretch and every solution I have found on this site so far to get it to expand, but every solution I have tried have all resulted in forced infinite width or unbounded width or non-zero flex but incoming width constraints are unbounded.
Here's my code in the build method as it currently stands:
List<Widget> fullTextDownloadBtns = new List();
if (this.fullArticleUrl != null && this.fullArticleUrl.isNotEmpty) {
fullTextDownloadBtns.add(
FlatButton(
color: Color(0x66629c44),
onPressed: _openFullArticle,
child: Text(
"Full Article",
style: TextStyle(color: Color(0xff629c44)),
),
)
);
}
if (this.downloadUrl != null && this.downloadUrl.isNotEmpty) {
fullTextDownloadBtns.add(
FlatButton(
color: Color(0x664d69b1),
onPressed: _download,
child: Text(
"Download",
style: TextStyle(color: Color(0xff4d69b1)),
),
)
);
}
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff0096b0)
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// ...related image, title
Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: fullTextDownloadBtns,
),
), // Read full article & download PDF
// ... Authors, excerpt/description, like/share buttons, comments
],
)
),
);
Wrapping your buttons with Expanded is the way to go here (I tried it with your code) :
Row(
children: [
Expanded(
child: FlatButton(onPressed: (){},
child: Text("1")),
),
Expanded(
child: FlatButton(onPressed: (){},
child: Text("2")),
)
],
),
By the way, since the SDK 2.2.2 (in your pubspec.yaml), you can use conditions within the children list :
children: [
if(true == true)
FlatButton(
onPressed: (){},
child: Text("1")),
],
I just wanted to add that you can adjust the width of the buttons border by using the 'width' property inside 'side: BorderSide(color: Colors.black54, width: 2.2)'.
Row(
children: <Widget>[
Expanded(
child: FlatButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
side: BorderSide(color: Colors.black54, width: 2.2),
),
color: Colors.white,
child: (Text('BUTTON NAME')),
),
),
],
),
Couldn't find how to change the border outline width for a long while on here. So thought I might add it here. Maybe help some other noobie like me in the future.
You can use a Row widget and use two Expanded widget which their child are FlatButton.implement the condition fot them seperately sth like:
Row(
children:[
trueCondition ? Expanded(
child: FlatButton()
) : SizedBox()
]
)
I have a container with two columns. When you click on the OPTIONS button, the screen animates half a width to the left and shows additional (clickable!) options.
I'm currently doing this with a Row containing two containers where the second container lives in a Stack that overlays a translated-to-the-right container with the options. Something along those lines:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Stack(
children: <Widget>[
Container(
color: Colors.orange
),
Transform.translate(
offset: const Offset(170.0, 0.0),
child: Container(
color: Colors.green,
child: Column(
children: const <Widget>[
FlatButton(child: Text("Option 1")),
FlatButton(child: Text("Option 2")),
FlatButton(child: Text("Option 3")),
],
),
),
),
],
),
),
)
],
);
Now, since the green container is outside its parent stack, the option buttons won't get any gesture events and hence not work. There is a similar question here and even a GitHub issue. What neither provides is a solution.
Is there way to make gestures outside the stack work, and if not, what are my options for this use case? In a way what I'm trying to achieve is similar to a tab view but with two tab views displayed at the same time.
I have the following code:
class _MyHomePageState extends State {
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return new Scaffold(
body: new Column(
children: [
new Container(
color: JBTheme.colorGreenBrand,
height: 130.0,
alignment: Alignment.bottomLeft,
child: new Center(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: JBTheme.colorOrange,
constraints: new BoxConstraints(maxWidth: 270.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Image.asset("flags/flag_dk.png"),
new Container(
margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: new Text("Danmark"),
),
new Text("DKK")
],
),
new Expanded(child: new Image.asset("images/arrow.png")),
new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Image.asset("flags/flag_us.png"),
new Container(
margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: new Text("USA"),
),
new Text("USD")
],
)
],
),
),
),
),
),
new Expanded(
child: new Container(
color: JBTheme.colorGreyMedium,
child: new Column(
children: [
new Expanded(child: new Container()),
new Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Card(
elevation: -8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: new Container(
width: 200.0,
height: 30.0,
color: JBTheme.colorWhite,
child: new Stack(
children: [
new TextField(
textAlign: TextAlign.center
)
],
)
),
)
)
],
),
)),
new Container(
height: 260.0,
color: JBTheme.colorGreenMint,
)
],
));
}
}
And it looks like this:
But when I click the TextField and the keyboard opens I get this:
I did not expect all of my layout to be moved up by the full keyboard height, I would like it to only move up enough so that the focused TextField is visible (and not to give a error). How can I fix this, and why is it happening?
Thank you
Søren
There are two solutions to this problem.
Add resizeToAvoidBottomPadding: false to your Scaffold
Scaffold(
resizeToAvoidBottomPadding: false,
body: ...)
Put your Scaffold body inside a scrollableView (like SingleChildScrollView or ListView)
new Scaffold(
body: SingleChildScrollView(child: //your existing body
...)
You can find similar problem and answer here
This is Flutters way of showing us how many pixels of content will be hidden from users eyesight when using the keypad. Try setting resizeToAvoidBottomPadding to false... From docs:
Whether the body (and other floating widgets) should size themselves
to avoid the window's bottom padding.
Scaffold(
resizeToAvoidBottomPadding: false,
This will avoid the resizing so you will at least avoid the dev warning being shown. But remember user will not see some content, and also this is a developer warning.
Update on 17/10/2019
resizeToAvoidBottomPadding is now Deprecated.
Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.
Scaffold(
resizeToAvoidBottomInset: false,
If you just use SingleChildScrollView content looses vertical alignment. You can also wrap the SingleChildScrollView in a Center Widget.
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>...
A full description of this error and two possible solutions can be found on Medium article available on https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660. The last one works great for me.