Flutter fixed bottom container

by

Flutter Fixed Bottom Container

In Flutter, you can create a fixed bottom container using a combination of widgets and properties.
Here’s an example of how you can achieve this: 

    
      import 'package:flutter/material.dart';

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

      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Fixed Bottom Container',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              visualDensity: VisualDensity.adaptivePlatformDensity,
            ),
            home: Scaffold(
              appBar: AppBar(
                title: Text('Fixed Bottom Container'),
              ),
              body: Stack(
                children: [
                  // Main content of the screen
                  Positioned.fill(
                    child: Container(
                      color: Colors.white,
                      child: Center(
                        child: Text(
                          'This is the main content',
                          style: TextStyle(fontSize: 24),
                        ),
                      ),
                    ),
                  ),
                  // Fixed bottom container
                  Positioned(
                    left: 0,
                    right: 0,
                    bottom: 0,
                    child: Container(
                      color: Colors.blue,
                      padding: EdgeInsets.all(16),
                      child: Text(
                        'This is the fixed bottom container',
                        style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }
      }

In the above code, we use a Stack widget to overlay the main content with a fixed bottom container. The Stack widget allows us to position multiple elements on top of each other.

Inside the Stack, we use a Positioned.fill widget to create the main content. This widget takes up the entire available space and can be customized as needed. In this example, we simply use a Container widget with a white background color and centered text.

The fixed bottom container is created using another Positioned widget. We set the left, right, and bottom properties to position the container at the bottom of the screen. Inside the container, we use a Container widget with a blue background color, some padding, and a text widget.

By combining these widgets and properties, we can create a fixed bottom container in Flutter. Feel free to modify the code and styles to fit your specific requirements. Hope this helps!

Leave a comment