Question 136867 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to stick an elevated button in dart

I want a button to always appear in the screen, doesnt matter how much a scroll, i just want the button to be in a fixed button on the screen, kind of like above the text

A picture of the app with an example of a button

Tags:

5

Answers


  1. 0

    Use a Column, make the first Widget inside an Expanded and the second Widget your button.

    Second option: You put it inside a Stack and Align the Button to the bottom.

    Login or Signup to reply.
  2. 0

    if you are using Scaffold you can use the floatingActionButton

    Scaffold(
        floatingActionButton: FloatingActionButton(
            onPressed: () {}, child: Icon(Icons.alarm)),
        body: Column(
          children: [buildTabBar, buildLibraryTabBarView],
        ))
    Login or Signup to reply.
  3. 0

    first put this in scaffold.

           Scaffold(
                     Padding(
                        padding: EdgeInsets.only(top: 50),
                        child: YourWidget(
                            //homepage
              )
     

           bottomNavigationBar: homeBottomBar(),
              ),

    now create a new method homeBottomBar()

    class homeBottomBar extends StatelessWidget {
  const homeBottomBar({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(bottom: 9),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
                       // add Textbutton widget here //
                  ],
                )),
          ),
        ],
      ),
    );
  }
}

    the output will look something like this
    enter image description here

    Login or Signup to reply.
  4. 0

    Sample Code

      class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'App Bar',
        ),
      ),
      body: SizedBox(
        height: double.infinity,
        child: Stack(
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                ],
              ),
            ),
                        // Sticky Button positioned at botton
            Positioned(
              bottom: 4,
              right: 16,
              left: 16,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text(
                  'STICK BUTTON',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    Sample Preview

    enter image description here

    Login or Signup to reply.
  5. 0

    just do this:

        import 'package:flutter/material.dart';


class FloatingActionButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: 60,
              itemBuilder: (context, index) => ListTile(
                title: Text('List item $index'),
                trailing: Text('name'),
                
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: SizedBox(
        height: 80,
        width: 600,
        child: FloatingActionButton(
          heroTag: null,
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search