Dynamically setting Padding widget so Column is not covered by FAB

Question

Is there a way to dynamically add bottom padding to a Column so it is never obscured by the FAB?

For example, this has text covered by the FAB.

I add 50 amount of padding with Container(child: Padding(padding: EdgeInsets.all(50.0)),) so it is no longer covered and now looks like this:

My question is there a way to dynamically set this based on the height of the FAB? In my case the FAB is a button, but the FAB can be any widget of any height. So I want to avoid the 50.0 constant.

This is all the code used in the demo:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: View(),
    );
  }
}

class View extends StatelessWidget {
  final paragraphText = 'Example of a paragraph of text.' * 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            MaterialButton(onPressed: (){}, child: Text('Button example'),),
            Text(paragraphText),
            Container(child: Padding(padding: EdgeInsets.all(50.0)),)
          ],
        ),
      ),
    );
  }
}

diegoveloper · Accepted Answer · 2018-11-14T14:03:24.910

You can do the following:

assign a GlobalKey to your fab widget.
wait after the frame is loaded.
get the size of the fab widget using the GlobalKey and RenderBox.
declare a variable to store the padding.
call setState with the padding updated.

```

    class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'Flutter Demo',
              home: View(),
            );
          }
        }

        class View extends StatefulWidget {
          @override
          ViewState createState() {
            return new ViewState();
          }
        }

        class ViewState extends State<View> {
          final paragraphText = 'Example of a paragraph of text.' * 100;

          GlobalKey _keyFab = GlobalKey();
          double padding = 0.0;

          _onLayoutDone(_) {
            RenderBox renderObject = _keyFab.currentContext.findRenderObject();
            setState(() {
              padding = renderObject.size.height;
            });
            print("padding: $padding");
          }

          @override
          void initState() {
            WidgetsBinding.instance.addPostFrameCallback(_onLayoutDone);
            super.initState();
          }

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: new AppBar(),
              floatingActionButton: FloatingActionButton(
                key: _keyFab,
                onPressed: () {},
                child: Icon(Icons.add),
              ),
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    MaterialButton(
                      onPressed: () {},
                      child: Text('Button example'),
                    ),
                    Text(paragraphText),
                    Container(
                      child: Padding(padding: EdgeInsets.all(padding)),
                    )
                  ],
                ),
              ),
            );
          }
        }

Dynamically setting Padding widget so Column is not covered by FAB

1 Answers1

Linked