How to position the FloatingActionButton on the bottom right of the screen

user_14131411 0
Viewed 1574

I am trying to position the FloatingActionButton to the bottom right of the screen, but I can't manage to do so because I am using a column for all the widgets in the screen. What type of layout should I be using?

Here is what I did so far:

return Scaffold(
      body:Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/img/koralle.png'),
              fit: BoxFit.cover,
              //colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'COMMUNITY WALL',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Icon(
                      Icons.search,
                      size: 30,
                      color: TheBaseColors.lightRed,
                    ),
                  ],
                ),
              ),
              Filters(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Latest',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  // I need to change this so its not a static value
                  height: 185,

                  child: ListView(
                    children: [
                      FeedWidget(
                        userName: 'User 1',
                        // I need to change this to networkimage
                        userImage: '',
                        imageFeed: '',
                        textFeed:
                        '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. ',                        timeFeed: '1 hr',
                      ),
                    ],
                  ),
                ),
              ),

              FloatingActionButton(


                onPressed: () {},

                child: const Icon(Icons.add),
                backgroundColor: TheBaseColors.lightRed,
              ),

            ],
          ),
        ),
      );
  }
}

I need to rearrange the whole screen? And if so, which would be the best approach for the layout?

flutter
2 Answers

You can use the floatingActionButton property of Scaffold to have it automatically put in place.

Example:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          centerTitle: true,
          title: Text(
            "Lessons of Flutter",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        body: Center(
            child: const Text('Press the button below!')
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.mouse),
          backgroundColor: Colors.green,
        ),
      ),
    );
  }

Another way is to use Stack to position the FloatingActionButton yourself (in some case you want to control the exact position of the button)

user_104884440

Hope this helps. Wrap your floating action button with a Align.

Align(
  alignment: Alignment.bottomRight,
    child: FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.add),
      backgroundColor: TheBaseColors.lightRed,
       ),
    ),
user_159200460
Related