如何在 Flutter 中使图标按钮重叠容器小部件？

Question

I'm really new to Flutter. In the homepage, I intend to build the page something like this:

The other widgets are working pretty fine, but when I come to developing the double button like the design that overlapping the container widgets below, it's not working at all.

My first approach is using Stack which contain Positioned widgets (for the double button) and Container (for the other things). But, the Positioned widgets despite having a dummy child widget is not visible at all, whereas the Container is perfectly working. I don't know whether the Positioned is written in a wrong way, or else.

Here's the source code: https://github.com/andre-nk23/packme/blob/master/lib/main.dart

Can anyone help me here? To make those two button overlapping the container? Thank you.

Note : I'm using several imported packages, please notify me if those packages affects the process of developing the overlap double button.

Answer 1

Have you tried Stack? You can approach this many ways, I just made this in a rush.have a look

Container(
          height: 280,
          width: 400,
          child: Stack(
            children: [
              Positioned(
                bottom: 0,
                child: Container(
                  height: 250,
                  width: 400,
                  decoration: BoxDecoration(
                    color: Colors.pinkAccent,
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(30),
                      topLeft: Radius.circular(30),
                    )
                  ),
                ),
              ),
              Positioned(
                top: 0,
                right: 100,
                child: FloatingActionButton(
                  onPressed: (){},
                  child: Icon(
                    Icons.check_box
                  ),
                ),
              ),
              Positioned(
                top: 0,
                left: 100,
                child: FloatingActionButton(
                  onPressed: (){},
                  child: Icon(
                    Icons.check_box
                  ),
                ),
              ),
            ],
          ),
        )

Answer 2

Use Row For Positioning both of the Buttons in container.

     Container(
              height: 280,
              width: MediaQuery.of(context).size.width,
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    child: Container(
                      height: 250,
                      width: 400,
                      decoration: BoxDecoration(
                          color: Colors.pinkAccent,
                      ),
                    ),
                  ),
                  Positioned(
                    child: Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,                   children: [
                        FloatingActionButton(
                          onPressed: (){},
                          child: Icon(
                              Icons.person
                          ),
                        ),
                      FloatingActionButton(
                        onPressed: (){},
                        child: Icon(
                            Icons.face
                        ),
                      ),
                      ],
                    ),
                  ),
                ],
              ),
            )

Answer 3

void main() => runApp(MaterialApp(
      home: BottomNavBar(),
    ));

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  // ignore: unused_field
  int _page = 0;
  String tabAccent = '#B9EEDC';
  String pinkAccent = '#FF8787';
  String greenAccent = '#43D1A5';
  String blueAccent = '#030835';
  String buttonAccent = '#CDF0E0';
  GlobalKey _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      drawer: new Drawer(
        child: ListView(
          children: [
            Container(
              height: 210,
              child: DrawerHeader(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CircleAvatar(
                        backgroundImage: AssetImage('assets/img.jpeg'),
                        maxRadius: 30,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            'Julian Casablancas',
                            textScaleFactor: 1.6,
                          ),
                          Padding(
                            padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
                            child: Text(
                              'julian.c@gmail.com',
                              textScaleFactor: 1.1,
                            ),
                          )
                        ],
                      )
                    ]),
                decoration: BoxDecoration(color: HexColor('#CDF0E0')),
              ),
            ),
            ListTile(
              leading: Icon(FeatherIcons.home, color: HexColor('#030835')),
              title: Text('Beranda', textScaleFactor: 1.2),
              tileColor: HexColor('#CDF0E0'),
              selectedTileColor: HexColor('#A4E7CE'),
            ),
            ListTile(
                leading: Icon(Icons.person_outlined,
                    size: 25, color: HexColor('#030835')),
                title: Text('Profil', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(FeatherIcons.clock, color: HexColor('#030835')),
                title: Text('Riwayat', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(FeatherIcons.moon, color: HexColor('#030835')),
                title: Text('Mode gelap', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.attach_money, color: HexColor('#030835')),
                title: Text('Gabung kami', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.info_outline_rounded,
                    color: HexColor('#030835')),
                title: Text('Informasi', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading:
                    Icon(Icons.settings_outlined, color: HexColor('#030835')),
                title: Text('Pengaturan', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
            ListTile(
                leading: Icon(Icons.logout, color: HexColor('#030835')),
                title: Text('Keluar', textScaleFactor: 1.2),
                tileColor: HexColor('#CDF0E0'),
                selectedTileColor: HexColor('#A4E7CE')),
          ],
        ),
      ),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(80.0),
        child: AppBar(
          centerTitle: true,
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          leading: Padding(
            padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
            child: new IconButton(
                icon: new Icon(Icons.donut_large_rounded,
                    size: 25, color: HexColor('#030835')),
                onPressed: () => _scaffoldKey.currentState.openDrawer(),
                color: HexColor('#B9EEDC')),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 30, 0),
              child: Image(
                image: AssetImage('assets/img.jpeg'),
                height: 40,
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 60.0,
        items: <Widget>[
          Icon(Icons.qr_code_rounded, size: 30),
          Icon(Icons.attach_money_rounded, size: 30),
          Icon(FeatherIcons.box, size: 30),
        ],
        color: HexColor('#B9EEDC'),
        buttonBackgroundColor: HexColor('#B9EEDC'),
        backgroundColor: HexColor('#ECFBF4'),
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 300),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: SafeArea(
        child: Container(
          color: Colors.red,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Stack(overflow: Overflow.visible, children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 25.0),
                  width: 500,
                  color: HexColor('#ECFBF4'),
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(30, 35, 30, 55),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Icon(FeatherIcons.info, size: 25),
                            Icon(FeatherIcons.clock, size: 25)
                          ],
                        ),
                        SizedBox(height: 10),
                        Text(
                          'Scan QR',
                          style: GoogleFonts.poppins(
                            textStyle: Theme.of(context).textTheme.headline1,
                            fontSize: 28,
                            fontWeight: FontWeight.w700,
                            color: HexColor('#030835'),
                          ),
                        ),
                        SizedBox(height: 2),
                        Text(
                          'di restoran / driver',
                          style: GoogleFonts.poppins(
                            textStyle: Theme.of(context).textTheme.headline1,
                            fontSize: 18,
                            fontWeight: FontWeight.w400,
                            color: HexColor('#030835'),
                          ),
                        ),
                        Text(
                          'untuk mulai meminjam',
                          style: GoogleFonts.poppins(
                            textStyle: Theme.of(context).textTheme.headline1,
                            fontSize: 18,
                            fontWeight: FontWeight.w400,
                            color: HexColor('#030835'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
             /* Here are the changes */
                Positioned( 
                  left: 75,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Icon(Icons.check_box),
                  ),
                ), 
                Positioned(
                  right: 75,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Icon(Icons.check_box),
                  ),
                ),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

Hello Andrea, this is the necessary code which you can implement perfectly. Well, I have removed the redundant widgets which was been used to make the code cleaner.The stack was used by me to implement your question.