I am trying to render a dribbble sample.
In normal android using XML, I can make any part stick to any side of another view. If I were using ConstraintLayout, I could make the bottom part stick to the bottom of the parent and let the top part expand to available height.
The design on both emulators is Flutter code.
On larger screens, there is some empty space on the bottom. How do I remove that?
Currently, I am using Flexible with flex values but it doesn't look right. How to make this reactive?. Is the use of Flexible correct?
The code can found here on pastebin
There is nothing like android:layout_gravity in Flutter, however you can pretty much achieve anything in Flutter. So, here you can use use Spacer(). Like:
return Column(
children: <Widget>[
Spacer(),
Align(alignment: Alignment.centerRight, child: Text("123")),
YourButtonsWidget(),
],
);
try to change CalculatorPrototype's build function like this
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min, // actually this line and the next one doesn't needed
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: display,
),
Container(
child: keypad,
),
],
),
);
}
Related
How can I change the color of a ButtonBar in Flutter? There isn't a color in ButtonBarTheme as far as I can tell. I am trying to do something like this:
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// Somehow get the color of these buttons different to backgroundColor
persistentFooterButtons: _buildTextButtons(),
);
The best I can think of at the moment is to somehow reimplement the persistent footer buttons myself, but that is ugly. The problem seems to be that the Scaffold backgroundColor property is used in multiple places, yet is defined in a single widget. This means I can't wrap it in a Theme and override it piecemeal either, as far as I can tell.
Oh, I might have found an answer. I had been using both the bottomNavigationBar and the persistentFooterButtons. persistentFooterButtons are wrapped in a ButtonBar, which appears to limit your styling options.
bottomNavigationBar is a single widget, though, so you can fiddle with it. I switched to just build my own persistentFooterButtons after all.
(I had to edit this from my app, so it might not be copy/paste ready.)
Widget _buildNavigationBar(BuildContext ctx, Color barColor) {
List<Widget> actions = [
// We need the first element to be big, to push everything to the right.
Expanded(
child: Container(),
),
];
actions.addAll(_buildTextButtons(ctx));
Widget actionContainer = ColoredBox(
color: barColor,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: actions,
),
),
);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
actionContainer,
// I use this to make space for ads.
Container(
color: barColor,
height: 50,
),
],
);
}
return Scaffold(
backgroundColor: Colors.red,
body: Center(child: Text('foo')),
// removed this persistentFooterButtons: _buildTextButtons(),
// and replaced with this:
bottomNavigationBar: _buildNavigationBar(ctx),
);
you can also wrap that ButtonBar into Container and After that, you can make any type of changes to that ButtonBar, like coloring etc
I am working on the skeleton of a tablet app with flutter and I am facing, probably a very simple issue, but it is getting tricky for me to figure out what is going on here.
Basically the skeleton of the app should look something like this:
For that, I have written a simple Stateless class like this:
class BaseDetailsRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(flex: 1, child: _selectionColumn()),
Flexible(flex: 7, child: _contentArea())
],
),
);
}
Widget _contentArea() => Container(color: Colors.orange,);
Column _selectionColumn() => Column(
children: <Widget>[
Expanded(child: Container(color: Colors.blue,))
],
);
}
Which is giving me ALMOST the expected result:
The little issue here is on the bottom of the screen, as you can see, in the Scaffold, I have put backgroundColor: Colors.grey, and, after rendering the Row in the screen, it seems like for some reason I cannot make it take the whole available height, and I still see a bit of the grey background color of the Scaffold on the bottom.
I have tried wrapping the whole Scaffold inside a SafeArea widget, but it did not work.
How can I fix this in an easy way, meaning not having to add a bunch of other widgets?
It's kind of weird but your code is working as intended on my side (For both Portrait and Landscape). What emulator are you using?
See Picture: Pixel 2 API 29 Emulator Portrait
Pixel 2 API 29 Emulator Lanscape
could you Please try
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
and let me know is it working
I'm creating a card game and my UI has a Column() with various combinations of children widgets. One child is a Row
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Container(),
],
),
The Container() widgets each display what looks like playing cards. They have BoxDecorationsto provide a border + a child that's a Row(). The Row's children display a number (text) and a suit (image).
I would like to flash text over the two playing cards, something that's visible for just a couple seconds, e.g., "Well done." Although I'm always open to help, I assume this will amount to (Rich)Text() widgets and some sort of timer or Duration object, and that I can figure it out.
What I'm struggling with is figuring out how to create a text overlay that is both on top of and spans the two images. Do I have to do something like wrap the higher level Row() object in a Stack()? I hate all that nesting, plus I don't know how to have the text always be on top of everything else.
I think you are looking for Overlay widget:
Scaffold(
body: Container(child: Overlay(initialEntries: [
OverlayEntry(builder: (_) => Image.network("https://source.unsplash.com/random", fit: BoxFit.cover,)),
OverlayEntry(builder: (_) => Center(child: Text("Overlay", style: TextStyle(color: Colors.yellow),))),
])),
),
For now I am going with (pseudocode):
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Container(),
],
),
Center(
child: Text(),
),
],
),
With the Row() centered and the child:Text() centered, everything lines up and looks good. I do, however, think I need to spend time and learn about Positioned() widgets. I think that will ultimately be a better solution.
There is a widget (for example text). In the real example it comes after another widget in Column. How to put it in the center of the screen? As I understand it, the Column does not. How can this be done? Or are there other ways to specify the location of items?
Column takes all the available space of the parent and by default aligns the items to start
You can change fix this changes the MainAxisAlignment to center.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("test"),
],
),
or changing parents height and move it to the center (be careful if you add many items it will cause overflow)
child: Center(
child: Container(
height: 25,
child: Column(
children: <Widget>[
Text("test"),
],
),
),
),
Using Stack widget you can do it:
var textEmpty = Text("Some Text");
Stack(children: <Widget>[
Column(children: <Widget>[
Container(
,margin: EdgeInsets.only(top: 100.0)
,child: Center(child: textEmpty, ),)],),
listView,
]);
Use Center Wigdet instead of Container. Hope this helps!
No worries where it comes from. It depends on the view where you have added it.
If you want to show in the center then just use Center widget
If you want to use Container widget then, you have to add the width and height both to double.infinite
If you want to use it in the same widget then you can use the Stack widget as well.
It totally depends on the requirement of the view and in which way you are tried to implement it.
I am trying to make a widget take up 1/3 the screen regardless of the phone orientation. How do I accomplish this?
I got what I wanted by using a Column and wrapping the contents in Flexible and changing the flex to get the child to take up 1/3 the screen:
new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Flexible(flex: 2, child: new SizedBox()),
new Flexible(flex: 1, child: createTextBox())
]
);
There's a few widgets that might help: AspectRatio, Column/Expanded, and CustomSingleChildLayout in particular. It's hard to give a good answer without knowing exactly what you want to do though.
You should try using Expanded widgets as the children of your row, like so:
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Expanded(
child: yourFirstContentWidget,
),
new Expanded(
child: yourNextContentWidget,
),
new Expanded(
child: yourLastContentWidget,
)
]
)
The Expanded widgets will each try to fill as much space of the row as possible. Since there are three of them, they will have to share the space and you'll end up with each taking up 1/3 of the row.