Overlap a button at the bottom center edge in Flutter

NilachandanMohanty
February 6, 2024
242 views
0 votes
2 Answers

I’m a newbie in Flutter. From what I can figure out, I need to use Stack, Container, Position to get the result, but unable to come close to it. If anyone can point to a related article to achieve this or code block, it’ll be of great help.

Requirement: Need to place the "ADD" button above the bottom middle edge of the underlying image.

class FoodList extends StatelessWidget {
  const FoodList(
      {super.key, required this.foods, required this.restaurantName});

  final List<Food> foods;
  final String restaurantName;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      //scrollDirection: Axis.horizontal,
      itemCount: foods.length,
      /* separatorBuilder: (BuildContext context, int index) =>
                const Divider(), */ // Add a divider between each item in the list
      itemBuilder: (BuildContext context, int index) => foodItem(context, index),
      separatorBuilder: (BuildContext context, int index) {
        return const Divider(
          height: 1,
          color: Color.fromARGB(255, 212, 210, 210),
        );
      },
    );
  }

  InkWell foodItem(BuildContext context, int index) {
    return InkWell(
      onTap: () {
        timeDilation = 2.0;
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => 
              ItemDetailsHero(
                restaurantName: restaurantName,
                    itemName: foods[index].title,
                    imageUrl: foods[index].image,
                    description: foods[index].description,
              )
              
                  ),
        );
      },
      child: Padding(
        padding: const EdgeInsets.only(bottom: 10.0),
        child: Column(

          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(6, 20, 2, 20),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Expanded(
                          flex: 2,
                          child:  Hero(
                                tag: 'item',
                                child:

                                Container(
                                  //height: 240,
                                  child: ItemThumbnailCard(
                                    foods: foods,
                                    index: index,
                                  ),
                                ),
                              ),
                          ),
                      Expanded(
                          flex: 2,
                          child: _ItemDescription(
                              title: foods[index].title,
                              description: foods[index].description,
                              price: foods[index].price,
                              totalAveargeReview:
                                  foods[index].totalAveargeReview,
                              preparationTime: foods[index].preparationTime,
                              typeOfFood: foods[index].typeOfFood)),
                    ],
                  ),
                ),
                //const SizedBox(height: 20,)
              ],
            ),
            //ListTileWidget(foods: foods, index: index,),
            //const Divider(height: sqrt1_2,)
          ],
        ),
      ),
    );
  }
}

I tried the below code as experimental inside a ListView.builder() just to understand the concept of Stack and Container.

import 'package:flutter/material.dart';

class OverlapButton extends StatelessWidget {
  //const OverlapButton({super.key});

  double itemHeight =0;
  double itemWidth =0;

  @override
  Widget build(BuildContext context) {
    itemHeight = MediaQuery.of(context).size.height;
    itemWidth = MediaQuery.of(context).size.width;
    return Container(
      height: itemHeight * 0.4,
      decoration: BoxDecoration(
          color: Colors.red[400],
          borderRadius: BorderRadius.circular(20)
      ),
      margin: EdgeInsets.symmetric(vertical: 15),
      child: Column(
        children: [
          Stack(

            children: [
              Container(
                //clipBehavior: Clip.hardEdge,
                height: 200,
                decoration: BoxDecoration(
                    color: Colors.blue[100],
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
                ),
                //margin: EdgeInsets.only(top:70),

              ),
              Container(
                clipBehavior: Clip.hardEdge,
                //height: 100,
                decoration: BoxDecoration(
                    color: Colors.green[200],
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
                ),
                //margin: EdgeInsets.only(top:70),
                child: Container(
                  //clipBehavior: Clip.hardEdge,
                  height: 100,
                  decoration: BoxDecoration(
                      color: Colors.green[100],
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
                  ),
                  //margin: EdgeInsets.only(top:70),

                )
              ),




            ],
          ),
        ],
      ),
    );
  }
}

Tags: flutter flutter-container

Answers

Stack widget in Flutter allows you to place widgets on top of each other.

Try using below code:

import 'package:flutter/material.dart';

class OverlapButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 150,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Bottom Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 100,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Top Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Adjust the sizes, colors, and positions of the containers based on your requirements.

I think you are expection something like this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String imageUrl =
      'https://th.bing.com/th/id/OIP.HLuY60jzx5puuKjbqmWRRwHaEK?rs=1&pid=ImgDetMain';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 200,
            height: 200 + (100.0 / 2),
            child: Stack(
              children: [
                Positioned(
                  top: 0,
                  child: SizedBox(
                    height: 200,
                    width: 200,
                    child: Image.network(
                      imageUrl,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: 10,
                  right: 10,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.0),
                      color: Colors.yellow,
                    ),
                    height: 100,
                    child: const Center(
                        child: Text(
                      "ADD",
                      style: TextStyle(fontSize: 36),
                    )),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.