How to Fix Widget at Top/Bottom in Flutter

In this example, we will show you how to fix any widget at the top and bottom of the screen so that it can stick to its position while scrolling. This type of UI design is needed when you are making a sticky header or footer in your app.

See this also: How to Position Widget in Stack Layout in Flutter

List<int> nums = [1,2,3,4,5,6,7,8,9,10];

Stack(
  children: [
      Positioned(
        top: 80, //display after the height of top widtet
        bottom: 100, //display untill the height of bottom widget
        left:0, right:0,
        //mention top, bottom, left, right, for full size widget
        child: SingleChildScrollView(  //content widget tree
            child: Column(
              children: nums.map((num){
                  return Container(
                      width: double.infinity, //width 100%;
                      height: 80,
                      padding: EdgeInsets.all(20),
                      color: num % 2 == 0?Colors.purple:Colors.orange,
                      child: Text("Box $num"),
                  );
              }).toList(),
            ),
              
        )
      ),

      //set top/bottom widget after content, 
      //other wise it wil go below content
      Positioned( //position at top
        top: 0,
        left:0, right:0, //set left right to 0 for 100% width
        child: Container( //your top widget tree
            height: 80,
            color: Colors.blueAccent
        )
      ),

      Positioned( //position at bottom
        bottom: 0,
        left:0, right:0, //set left right to 0 for 100% width
        child: Container( //your bototm widget tree
            height: 100,
            color: Colors.greenAccent
        )
      ),
        
  ],
)

You can use Positioned widget to achieve the sticker widget at the top and bottom of your app screen. The "top, bottom, left, right" parameters have their own use while positioning the widget. See the full example below to understand more:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  List<int> nums = [1,2,3,4,5,6,7,8,9,10];

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Fix Widget At Top/Bottom"),
            backgroundColor: Colors.redAccent
          ),
          
          body: Stack(
            children: [
                Positioned(
                  top: 80, //display after the height of top widtet
                  bottom: 100, //display untill the height of bottom widget
                  left:0, right:0,
                  //mention top, bottom, left, right, for full size widget
                  child: SingleChildScrollView(  //content widget tree
                     child: Column(
                        children: nums.map((num){
                            return Container(
                                width: double.infinity, //width 100%;
                                height: 80,
                                padding: EdgeInsets.all(20),
                                color: num % 2 == 0?Colors.purple:Colors.orange,
                                child: Text("Box $num"),
                            );
                        }).toList(),
                     ),
                        
                  )
                ),

                //set top/bottom widget after content, 
                //other wise it wil go below content
                Positioned( //position at top
                  top: 0,
                  left:0, right:0, //set left right to 0 for 100% width
                  child: Container( //your top widget tree
                     height: 80,
                     color: Colors.blueAccent
                  )
                ),

                Positioned( //position at bottom
                  bottom: 0,
                  left:0, right:0, //set left right to 0 for 100% width
                  child: Container( //your bototm widget tree
                     height: 100,
                     color: Colors.greenAccent
                  )
                ),
                  
            ],
          )
       );
  }
}