Flutter - How to make footer view

In this post, I am going to share with you how to make a footer view in a flutter. we can make a footer view in various ways but today, I am sharing with you a simple way.

Column(
            children: [
              Container(child: HeaderWidget),//Header view
              Expanded(child: MiddleWidget),//Middle view
              Container(child: FooterWidget),//Footer view
            ]
      )

 In the above, example you can take the column view divided into three views header, middle, and a footer view.

Full code

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
          body: Column(
            children: [
              Container(
                margin: EdgeInsets.all(15),
                child: Text("Header View"),
              ),
              Expanded(child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Text("Data " + index.toString());
                  })),
              Container(
                margin: EdgeInsets.all(15),
                child: Text("Footer View"),
              ),

            ],
          )),
    );
  }
}

I hope it will help you. 

Tags: