I want to display a List and beneath it a Persistent footer, a Column with some rows. I use persistentFooterButtons of Scaffold.
The closest to what I get is this:
But I am unable to align the fields to the right.
When I work with Align or Spacer, the Widgets disappear.
The content of persistentFooterButtons.
FittedBox(
child: Column(
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
MyFutureBuilder(
future: sum,
builder: (context, double sum) {
var mySum = formatDoubleNumber(sum);
return Text('$mySum');
},
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
),
);
If I put the elements directly to persitentFooterButtons, this is what I get, the text is scattered around and my list is not shown.
and the Code
Scaffold(
body: WarenkorbListe(),
persistentFooterButtons: <Widget>[
// WarenkorbFooter(),
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
);
Try to align with your column instead
FittedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end, // this
children: <Widget>[
Related
Please see my code and scree shot below. I want locate Text("to be center") at center horizontally, but comparatively located right side as showen below.
I understand i'ts because I'm using expanded widget and set flex 1 & 4 and Text("to be center") are inclueded in latter block.
How can I located totally or relatively center but using expandede & flex property like this case ?
Also I understand I can adjust it by wrapping Text() with padding and set EdgeInsets.only(right:X) but I can not figure out if it is totally cenerized or not...
Row(
children: [
Expanded(
flex:1,
child:TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex:4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
),
child: Text("to be center",style: MyText(myFontSize: 15).style()),
)
),
],
),
Just use Spacer at the end inside Row
Row(
children: [
Expanded(
flex: 1,
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(),
child: Text(
"to be center",
style: MyText(myFontSize: 15).style(),
),
),
),
// like this
const Spacer(),
],
),
Learn more about the Spacer widget
Try below code: refer layout
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
const Expanded(
child: Center(
child: Text(
'to be center',
),
),
),
const Expanded(child: SizedBox())
],
),
Result->
The simple solutions could be:
Use textAlign attribute of Text widget or
Wrap Text widget with Center widget inside Expanded widget or
You can even explore the widget IntrinsicWidth with Center widget.
PopupMenuButton<String>(
///Icon
child: SizedBox(
child: Stack(
children: [
const Icon(
Icons.notifications_outlined,
),
Container(
child: Container(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Center(
child: Text(
''
),
),
),
),
)
],
),
),
onSelected: (value) {},
itemBuilder: (BuildContext context) {
///generating list on the fly
var myList = someList!.map((listItem) {
return PopupMenuItem<String>(
value: listItem.id.toString(),
child: SizedBox(
child: Column(
children: [
Text(
listItem.name!,
),
],
),
),
);
}).toList();
var closeButtonList = [
PopupMenuItem<String>(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: IconButton(
onPressed: Navigator.of(context).pop,
icon: const Icon(
Icons.close,
),
),
),
],
),
),
///appending list using spread operator
...myList
];
return closeButtonList;
},
This code works fine and displays a cross(close) icon as the first element of the list.
The problem is when I scroll the list, the icon get scrolled and disappears from the screen.
How can I make it fixed while the rest of the list is scrollable?
I am working on a flutter application where I need to change my tab programmatically, here If I came on the last screen of the stack then I need to redirect to the first tab programmatically instead of closing the app.
Please consider the following code snnipet:
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomeFragment();
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF3F5F9),
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
width: double.infinity,
height: 15.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
currentScreen = HomeFragment();
currentTab = 0;
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/home.png',
color: currentTab == 0 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Home',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
redirectToLogin();
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/login_icon.png',
color: currentTab == 1 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Login',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
redirectToSignUp();
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/signup_icon.png',
color: currentTab == 2 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'SignUp',
),
],
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
currentScreen = ProfileFrag();
currentTab = 3;
});
},
child: Expanded(
child: Container(
height: 15.5,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/menu_icon.png',
color: currentTab == 3 ? Color(0xFF193F70) : Color(0xFFABAAAA),
),
SizedBox(
height: 3.0,
),
Text(
'Menu',
),
],
),
),
),
),
],
),
),
),
);}
Here I am looking for something that can redirect to a different tab programmatically. Also please let me know if I am doing something wrong here.
I believe it would be better to use a real Flutter TabBar. Have you considered this solution?
There is a complete tutorial on this blog : https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/
It includes a way to change tabs programmatically. This is actually what I am trying to do with my own app.
Let me know if this could work for you.
The layout have uses column with Text and Image. The data change based from a list and some text/image are nil. How to make the container takes the same height when only one data is present?
Thanks.
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text('Next Button',
),),),],),),],),
first approach: add a fixed height to your container
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
// this will give the container a fixed height of 0.4 from the screen height
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
),
second approach: if one of them is null add a SizedBox() with your prefered height
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
someCondition ? Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
) : SizedBox(height : 40)
someCondition ? Image.asset('assets/index.jpg') : SizedBox(height : 40)
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
);
One way is to wrap column with Expanded. Second is to have fixed height for contained. If you have this problem with ListView inside another widget and have problems, use shrinkWrap as true inside a ListView. And again for your problem (which person above failed to understand) is that you need or fixed value for height or use Expanded (as much space as possible) or Flexible (least space possible).
So I'm trying to remove the bottom margin of raisedButton so it will look like it is merged with the card below it.
here's what it looks like
here is my code
Expanded(
child: Card(
elevation: 5,
// shape:
// RoundedRectangleBorder(borderRadius: BorderRadius.circular(22)),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Apakah anak sudah bisa ... ?",
style: TextStyle(fontWeight: FontWeight.bold)),
),
],
),
Row(
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text(
"Iya",
style: TextStyle(color: Colors.white),
),
color: Colors.green[300],
onPressed: () {}),
),
Expanded(
child: RaisedButton(
child: Text(
"Tidak",
style: TextStyle(color: Colors.white),
),
color: Colors.red[200],
onPressed: () {}))
],
)
],
),
),
)
or do you guys have any other alternative solution to achieve that?
You can explicitly set your Row height to match the height of your RaisedButton. Simply wrap it inside a Container and add the height attribute.
If you want to, you can access the default height by using Theme.of(context).buttonTheme.height. Theme.of returns the ThemeData used in the current context.
Here a minimal example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Test'),
Container(
height: Theme.of(context).buttonTheme.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Yes'),
color: Colors.green,
),
RaisedButton(
onPressed: (){},
child: Text('No'),
color: Colors.red,
)
],
),
),
],
)
),
),
)),
);
}
}
I had the same problem. NikasPor's answer didnt work for me, unfortunately. The way I fixed it is by seeting the crossAxisAlignment on the row to .stretch
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[ /* Buttons Here */]
)