Home > Back-end >  Flutter- The submit button won't go down, How do I move the submit button to bottom center
Flutter- The submit button won't go down, How do I move the submit button to bottom center

Time:09-24

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'),
            ],
          ),
          ),
      ),
),
    );
  }
}
}
  • Related