Reputation: 317
I am working on flutter layouts and i am trying to get the last container to be placed exactly like bottom navigation bar, in my body used columns to set widgets and in second last widget is list view. i want list view to fill the bottom screen until last container which is acting as bottom bar.
But my last container has a lot of space at the bottom how to fix that.
class _MyPersondataState extends State<Persondata> {
double height;
double width;
final Color lightbluecolor = Color(0xFF3AB5FF);
List<int> getListItems(){
List<int> numberlist = List(10);
numberlist[0] = 5700;
numberlist[1] = 1200;
numberlist[2] = 970;
numberlist[3] = 1840;
numberlist[4] = 2520;
numberlist[5] = 5700;
numberlist[6] = 6200;
numberlist[7] = 4970;
numberlist[8] = 6840;
numberlist[9] = 7520;
var items = numberlist;
return items;
}
Widget getListView(){
var listitems = getListItems();
var listView = ListView.builder(
itemCount: listitems.length,
itemBuilder: (context, index){
return ListTile(
title: Text('Gross Salary'),
trailing: Text(listitems[index].toString()),
);
}
);
return listView;
}
@override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(''),
),
body: Container(
margin: EdgeInsets.only(left:15.0,right: 15.0),
color: Colors.white,
width: width,
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Text(
'What a loss carryforward is',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
SizedBox(height: 8),
Flexible(
child: new Text(
'If your costs exceeded your salary, then you will have loss for this tax year.'
' You can carry this loss.'
' This will reduce next year’s tax\n\n. '
'*How do i do that?*\n\n'
' In order to make use of this, you must send a tax return to office.'
' You do not have to worry.'
' You will then receive acknowledgement from the office.\n\n'
,
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
height: 1.2,
fontSize: 14.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your Taxes in detail',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 16.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Your income',
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
),
SizedBox(height: 6,),
Expanded(
child: getListView(),),
Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
color:Colors.amber,
margin: EdgeInsets.only(left:2.0,right: 2.0,bottom: 1.0, top: 24.0),
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
"REFUND :",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
Text(
"0,00"+"$",
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 20.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
],
),
Spacer(),
MaterialButton(
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(12.0) ),
height: 50,
onPressed: (){
// Navigator.push(context, MaterialPageRoute(builder: (context)=>Persondata()));
print("cilcked");
},
child: Text(
"Submit",
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 15.0,
fontFamily: 'Roboto',
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
color: lightbluecolor ,
),
],
),
),
),
],
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
this is pic where is shpwing white space.
Upvotes: 0
Views: 6378
Reputation: 448
Give the last Container desired height and finally wrap your listView in Expanded.
Expanded(
child: ListView(
children: <Widget>[]
),
),
child: Containter(
height: x,
), //last one
),
Upvotes: 2
Reputation: 792
Give the listview desired height by wrapping it inside a container and finally wrap your last container in Expanded. Here's an example!
Container(
height: x,
child: ListView(
children: <Widget>[]
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Containter(), //last one
),
),
Upvotes: 2