Flutter position button bottom very right?

Question

I want to position my Button there, I have it inside a Column. I tried to wrap an Align widget around, but this dosent worked out (see Picture). It worked for me with a huge sized boxed and then a Row with AxisAligment end, but this is hardcoded, not depend on from media query or. I need something that stick this Icon button on the corner of my ClipPath.

code:

 child: ClipPath(
            clipper: RoundedDiagonalPathClipper(),
...
            child: Transform.scale(
...
              child: Container(
...
                child: Form(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
...
  Align(
                          alignment: Alignment.bottomRight,
                          child: IconButton(
                              onPressed: () {
                                controllerV.nextPage(duration: Duration(milliseconds: 750), curve: Curves.easeIn);
                              },
                              icon: Icon(Icons.expand_circle_down)),
                        ),

https://stackoverflow.com/q/44713501/2804581 - Check this floating button — Dinesh Nagarajan, Oct 17 '22 at 13:46
How should I implement this in a Column? In a Scaffold it dont make sense i want it in the right corner of my Clip not of my entire widget. — Fabian M, Oct 17 '22 at 13:52

score 1 · Accepted Answer · answered Oct 17 '22 at 14:01

You can use Spacer() widget. Just like below

ClipPath(
            clipper: RoundedDiagonalPathClipper(),
...
            child: Transform.scale(
...
              child: Container(
...
                child: Form(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
...


  Spacer(),


  Align(
                          alignment: Alignment.bottomRight,
                          child: IconButton(
                              onPressed: () {
                                controllerV.nextPage(duration: Duration(milliseconds: 750), curve: Curves.easeIn);
                              },
                              icon: Icon(Icons.expand_circle_down)),
                        ),

Or You can give height to the container. And you code will work

score 0 · Answer 2 · answered Oct 17 '22 at 14:49

you can use this one as an example :

 Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children[
    Expanded(
       SingleChildScrollView(
           child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children[]))),
    Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.center,
        children[]),
  ],
)

just put your top components in the expanded column and put the button in the row that under the expanded component , this will leads to your wanted design.

Flutter position button bottom very right?

2 Answers2