Add a column of buttons over an image in Flutter

Question

I have a flutter app that I want to add "stories" to, but I am unable to do so cause I can't place 3 buttons over an image.

That's my desired look...

And this is what I can do so far...

And this is my code:-



child: GestureDetector(
          child: Center(
            child: Stack(
              alignment: Alignment.bottomRight,
              children: [
                Image.network(
                  widget.url,
                ),
                Container(
                  child: Column(children: [
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    ),
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    ),
                    Container(
                      color: Colors.grey,
                      child:
                          Column(children: [Icon(Icons.share), Text('مشاركة')]),
                    )
                  ]),
                )
              ],
            ),
          ),
          onTap: () => controller.next(),
        ),

How can I achieve this effect?

Am I doing something with the Stack widget?

Remove the alignment added to the stack and add it to individual containers. PS : You can make a column containing all three containers and align it accordingly — Ganesh Bhat, Feb 14 '22 at 07:15
Can you make it as an answer, if it works I'll pin & upvote it... — Hussein Al-Mosawi, Feb 14 '22 at 07:18
https://stackoverflow.com/questions/70287885/how-to-display-text-with-png-in-the-stack/70288079#70288079 — Anmol Mishra, Feb 14 '22 at 07:36

score 1 · Accepted Answer · edited Feb 14 '22 at 08:02

Using Positioned inside Stack can solve your problem, Below code may work for you, You can position the Container where you want it to be.

Widget build(BuildContext context) {
    var ScreenHeight = MediaQuery.of(context).size.height;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Expenses App"),
          backgroundColor: Colors.pink[900],
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              // onPressed: () => startAddNewTransaction(context),
            ),
          ],
        ),
        body: GestureDetector(
      child: Center(
      child: Stack(
        // alignment: Alignment.bottomRight,
        children: [
          Image.network(
            'https://picsum.photos/250?image=9',
          ),
          Positioned(
            top: ScreenHeight * 0.17,
            child: Container(
              child: Column(children: [
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                ),
                SizedBox(height: ScreenHeight * 0.01),
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                ),
                SizedBox(height: ScreenHeight * 0.01),
                Container(
                  color: Colors.grey,
                  child:
                  Column(children: [Icon(Icons.share), Text('مشاركة')]),
                )
              ]),
            ),
          )
        ],
      ),
    ),
    // onTap: () => controller.next(),
    ),

      ),
    );
  }

score 1 · Answer 2 · answered Feb 14 '22 at 08:14

The default mainAxisSize of Column is max, If you set MainAxisSize.min for all Column you will get Stack's alignment.

child: Column(
  mainAxisSize: MainAxisSize.min,

As for the alignment of your desire UI, I prefer using Align widget to wrap the parent Column.

Align(
  alignment: Alignment(-1, .5), //play with it
  child: Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [

More about Align.

score 0 · Answer 3 · answered Feb 14 '22 at 07:44

GestureDetector(
        child: Center(
          child: Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                      "https://st2.depositphotos.com/3759967/5593/i/600/depositphotos_55936567-stock-photo-swirling-frosty-multi-colored-fractal.jpg",
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: MediaQuery.of(context).size.height * 0.1,
                child: Column(
                  children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 10.0),
                    color: Colors.grey,
                    child: Column(
                        children: const [Icon(Icons.share), Text('مشاركة')]),
                  )
                ]),
              ),
            ],
          ),
        ),
      ),

You can do like this, place image as background of a container, and your column in a positioned widget. example

Add a column of buttons over an image in Flutter

3 Answers3