CODEWITHSUNDEEP
flutterflutter-layout
pemyaaf
pemyaaf

Reputation: 35

How to prevent FloatingActionButton from take any space

This is the layout now

With this code:

return Scaffold(
      bottomNavigationBar: KrigliBottomNavigation(
        selectedIndex: 0,
      ),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 500,
            child: Text("TEST"),
          ),
          Stack(
            clipBehavior: Clip.none,
            children:[
              //FloatingActionButton
            ],
          ),
          Stack(
            children: [
              Text("TEST"),
            ],
          ),
      ],
      ),
    );

But I want something like this: FAB over another elements, without taking space

Upvotes: 0

Views: 174

Answers (1)

Afridi Kayal
Afridi Kayal

Reputation: 2285

Almost there!! Your stack should be above column and the second child of the stack can be a align widget containing the FAB.

Like so:

return Stack(
  fit: StackFit.expand,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
          )
        ),
        Expanded(
          child: Container(
            color: Colors.green,
          )
        ),
      ],
    ),
    Align(
      alignment: Alignment(0.9, 0), // Goes from -1 to 1 for both axes
      child: FloatingActionButton(
        onPressed: () { },
        child: Icon(Icons.phone),
      )
    ),
  ]
);

The structure basically goes like a stack of two widgets. The background column having those containers and a right-aligned floating action button drawn on top of the column.

Upvotes: 2

Related Questions