CODEWITHSUNDEEP
flutter
Millenial2020
Millenial2020

Reputation: 2921

Flutter - bottom sheet how to move textfield to the bottom

I want TextField to show at the bottom of the screen.

return Column(
      children: [
        const _Title(),
        Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
            const TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ],
        ),
      ],

enter image description here

If I put Wrap my Textfield Widget in a position bottom:0 I get a hasSize error.

Upvotes: 2

Views: 796

Answers (4)

Vishal_VE
Vishal_VE

Reputation: 2137

You need to pass the height after wrapping the Column widget with a container.

return Container( 
height: 80, // add here height of your container, hope it will work. 
child: Column(
      children: [
        const _Title(),
        Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
            const TextField(
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey,
                  ),
                ),
                border: OutlineInputBorder(),
                hintText: 'Enter a search term',
              ),
            ),
          ],
        ),
      ],
),
)

Upvotes: 0

Mofidul Islam
Mofidul Islam

Reputation: 520

Can you please try this? .Its working I have tested.

return Column(
      children: [
         const _Title(),,
        Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
          ],
        ),
        Spacer(),
        const TextField(
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                color: Colors.grey,
              ),
            ),
            border: OutlineInputBorder(),
            hintText: 'Enter a search term',
          ),
        ),
      ],
    );
  }

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12595

Please try with align

Column(
            children: [
              const _Title(),
              Flexible(
                child: Stack(
                  children: [
                    ListView(
                      shrinkWrap: true,
                      children: const [
                        _Message()
                      ],
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: TextFormField(
                        decoration: InputDecoration(
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Colors.grey,
                            ),
                          ),
                          border: OutlineInputBorder(),
                          hintText: 'Enter a search term',
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          )

Upvotes: 0

Ehsan Askari
Ehsan Askari

Reputation: 891

First, Wrap the Stack with an Expanded widget so that it takes the full vertical available space.

Then, wrap the TextField with a Positioned and in addition to setting bottom to zero, you need to set the left and right to whatever value you want.

return Column(
    children: [
      const _Title(),
      Expanded(
        child: Stack(
          children: [
            ListView(
              shrinkWrap: true,
              children: const [
                _Message(),
              ],
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: const TextField(
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.grey,
                    ),
                  ),
                  border: OutlineInputBorder(),
                  hintText: 'Enter a search term',
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  );

Upvotes: 2

Related Questions