Here is part of the code that I made and This is the result that I get.
Widget _buildPage() {
return SafeArea(
child: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
],
),
),
),
);
}
}
}
The result that I expected was supposed to be the submit button at the bottom of the screen and still cannot figure out how to move it to bottom even after I used alignment bottom center. Any suggestion on what I should fix?......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
CodePudding user response:
Align wont work here as it only takes the space column provides it. So add spacer before it. so that it pushes the button till the full height.
_label('Required Date', 'DD/MM/YYYY'),
Spacer(), //add here
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
CodePudding user response:
you can simply pass button in bottomNavigationBar
as shown below:
scaffold(
body: ///your current code
bottomNavigationBar: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
)
CodePudding user response:
You can achieve it using Expanded(). Wrap you button with Expanded.
Example :
Expanded(
child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
),
)
],
),
),
)),
CodePudding user response:
You can create a child of SafeArea as Scaffold and pass that submit button in bottomSheet or bottomNavigationBar-
Widget _buildPage() {
return SafeArea(
child: Scaffold(
bottomSheet: Container( height:60, width:100, child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
),
body: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
],
),
),
),
),
);
}
}
}