Many variations of this question exist with solutions. I have been unable to find an adequate solution. Is it possible to fix a button at the bottom of the screen which the keyboard is allowed to overlay, but also moves the other text fields up?
I've attached a screenshot example
My current solution works, but the space between the textfield and the post button is a fixed SizedBox height. This shifts the post button around on different screen heights, which is hack.
Is there a way to do something similar to how an Expanded widget fills the empty space, but within a ListView? Expanded throws an error if parent is a ListView, and a parent of Flex would squeeze all the elements when the keyboard comes up.
Widget Layout: (super simplified)
return ListView(
children: <Widget>[
Container(//The photo boxes at top
height: fixed,
),
ListTile(
leading: CircleAvatar(),
title: Container(child: TextField(),),
),
SizedBox(
height: screenHeight * 0.5 - 225
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: RaisedButton(
onPressed: doThing
child: Text('POST'),
),
),
],
),
],
);
Related
I need to achieve, using flutter, a layout like the following but I am not capable of it. I have worked with the expanded and the Column MainAxisAlignment but can't solve.
I attach images of the layout I want to achieve:
I am also attaching the code (without padding):
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
// Row "Chat salvate"
// Fist card
// Second card
// Third card
]),
),
),
// Button
I have created an example UI in DartPad with the same design you are trying to implement.
Check it out here.
I'm making a custom widget for showing a weekly schedule. I want it to look somewhat like a normal table, with the days in the header and the time of day on the vertical axis. Then I want to add events in the calendar, but as an event can span several cells, I can not use the built in table (it has no col/row span).
So I started to make my own table using CustomPaint. It went OK until I came to the header part, which I am stuck on the layout with my idea. In the code I supplied you can see that the header will have the same width as the side bar (with time) and the WeekView (the CustomPaint table). This means I have no idea how to align the header (Monday, Tuesday etc..) with the grid in the WeekView as the space the side bar takes up is not known. And as I want the side bar to scroll with the table, it has to be inside the scrollview. Can I solve this any other way? Maybe with slivers (that I know very little of yet)?
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
WeekSelector(
week: controller.week,
onPrevPressed: onPrevPressed,
onNextPressed: onNextPressed,
),
WeekHeader(),
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: Row(
children: <Widget>[
Text("09:00"), // here will be a bar for the time
Expanded(
child: WeekView(
startHour: 9,
endHour: 18,
),
),
],
),
),
),
),
],
);
}
I'm building a screen which has a bottom navigation bar, where I placed an burger action button and a floating button, and an appbar where I want to place my app logo.
Even though i didn't give any action to the appbar, the burger icon still appears at the left of the title.
I would like to only have the title in the appbar.
This is my code:
appBar: new AppBar(
title: new Image.asset('assets/logo/logo-home.png', fit: BoxFit.fitHeight),
actions: null,
backgroundColor: Colors.black,
elevation: 0.0,
),
key: _scaffoldKey,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: ImageIcon(new AssetImage("assets/icons/star.png"), color: Colors.black),
backgroundColor: Colors.white,
onPressed: scan,
),
bottomNavigationBar: BottomAppBar(
color: Color.black,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), color: Colors.white, onPressed: ()=> _scaffoldKey.currentState.openDrawer(),),
],
),
),
If the scaffold has a drawer and the appbar doesn't contain 'leading' property (or with null value), Appbar will append a menu icon in its actions.
It's mentioned in the documents:
If the leading widget is omitted, but the AppBar is in a Scaffold with a Drawer, then a button will be inserted to open the drawer. Otherwise, if the nearest Navigator has any previous routes, a BackButton is inserted instead. This behavior can be turned off by setting the automaticallyImplyLeading to false. In that case a null leading widget will result in the middle/title widget stretching to start.
The solution is easy, just replace title property with leading in your appbar
appBar: new AppBar(
leading: new Image.asset('assets/logo/logo-home.png', fit: BoxFit.fitHeight),
actions: null,
backgroundColor: Colors.black,
elevation: 0.0,
),
I'm Android developer learning flutter. I want my screen looks like this:
|---------------------------------|
| |
| Babe I miss you |
| |
|---------------------------------|
"Babe" and "I miss you" should be two separate elements.
With Android xml I would solve this with LinearLayout and two TextViews with weight=1 for each. What's the alternative for flutter?
P.S. I know that you can solve it with FrameLayout or with RelativeLayout but I want closest to LinearLayout behavior.
Flutter's Row widget is equivalent to android's LinearLayout with android:orientation="horizontal",
and Column widget is equivalent to android's LinearLayout with android:orientation="vertical".
flex property of Flexible widget is equivalent weight property, you can wrap the Text widgets in a Flexible widget and specify the flex property.
Example:
new Row(
children: <Widget>[
new Flexible(child: new Text("Babe"), flex: 1,),
new Flexible(child: new Text("I miss you"), flex: 1,)
],
)
Using an Expanded widget can also produce a LinearLayout effect like so:
Row(
children: <Widget>[
Expanded(
child: Container(child: Text("Babe")),
flex: 2,
),
Expanded(
child: Container(child: Text("I don't miss you"),alignment: Alignment.centerRight),
flex: 2,
),
],
),
Considering the layout in the question you want to display both the texts at the end of screen one at the beginning other at the end you can simply add MainAxisAlignment.spaceBetween property to the row
so you need to modify your code to
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text('Babe'),
new Text('I miss you')
]
)
I dont understand why first answer was accepted because it simply adds both the text to right most end of the screen,
Tip: Incase you need some padding around each text wrap each of the text in a Container and add desired padding and margin
You can use row with MainAxisAlignment which will allow you to place elements as per your expectation
Widget textSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text('Babe'),
new Text('I miss you')
)
)
Screenshot:
Use Spacer which comes with a flex property (defaults to 1)
Row(
children: <Widget>[
Text('Hello'),
Spacer(), // <-- Use this
Text('World'),
],
)
new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget> [
new Text('Babe', style: AppStyle.AppBarTextStyle,),
new Text('I miss you',style: AppStyle.AppBarTextStyle,)
]
)
)
We can use FractionallySizedBox widget to give weight sum for both width and height.
FractionallySizedBox(
heightFactor: .5,
widthFactor: 1.0,
alignment: Alignment.topCenter,
child: child,
)
For more info:
Link
I have a couple of image buttons laid out as follows :
The layout code is :
new Container(
height: 48.0,
child: new Row(
children: <Widget>[
new GestureDetector(
onTap: cancelTurn,
child: new Align(child: new Image.asset("assets/cancel_button.png"), widthFactor: 1.5),
),
new Expanded(child: new Container()),
new GestureDetector(
onTap: confirmTurn,
child: new Align(child: new Image.asset("assets/confirm_button.png"), widthFactor: 1.5),
),
],
),
)
I am using Align widget to hopefully increase the clickable area of the GestureDetector. However, my clicks only work when I click inside the Image widget rect. If you notice, the bounds/rects for Align and Image are different. Align is extended beyond the Image child by using the widthFactor property (set to 1.5)
Any ideas on why the Align widget might not be detecting the tap gesture in its bounds.
Try passing a hitTestBehavior of HitTestBehavior.opaque to the GestureDetector.
Other tips:
Instead of Align, consider a Padding.
Consider using an IconButton with Icons.close and Icons.check instead of embedding a custom png. You could wrap it in a Material to draw the black circle and it will even clip the ink splash for you automatically.
To get the desired effect, you could replace the GestureDetector elements for InkWell. This will give a feedback to the user (due to the Ink animation) and will be activated when the whole area is pressed.
To do that, your container should look like this:
new Container(
height: 48.0,
child: new Row(
children: <Widget>[
new InkWell(
onTap: cancelTurn,
child: new Align(child: new Image.asset("assets/cancel_button.png"), widthFactor: 1.5),
),
new Expanded(child: new Container()),
new InkWell(
onTap: confirmTurn,
child: new Align(child: new Image.asset("assets/confirm_button.png"), widthFactor: 1.5),
),
],
),
)