How to properly stack one widget onto another in flutter?

Question

What i want to achieve is to stack one widget onto another one with smooth animation when button pressed. Below is a screenshot of what i am trying to achieve (from left to right). Appreciate any help!

Answer 1

you can try the following, using a card, an AnimatedPositioned, and some more widgets

import 'dart:developer';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Stack Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool showed = false;
  double incrementBoxHeight = 50;

  void incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void decrementCounter() {
    setState(() {
      if (_counter > 0) {
        _counter--;
      }
    });
  }

  void togleDetail() {
    setState(() {
      showed = !showed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
            child: Stack(
          children: [
            Image(image: AssetImage('asset/img/indice.jpeg')),
            AnimatedPositioned(
              duration: Duration(seconds: 1),
              bottom: showed ? incrementBoxHeight : 0,
              right: 0,
              left: 0,
              child: GestureDetector(
                onTap: togleDetail,
                child: Container(
                  height: 50, //you can do it with mediaQuery
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        blurRadius: 5.0,
                        spreadRadius: 2.0,
                      ),
                    ],
                    color: Colors.blueAccent,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    children: [
                      SizedBox(
                        width: 10,
                      ),
                      Column(
                        children: [
                          Text(
                            "Topt",
                            style: TextStyle(fontSize: 20),
                          ),
                          Text(
                            "8 TMT",
                            style: TextStyle(fontSize: 20, color: Colors.red),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Visibility(
              visible: showed,
              child: Positioned(
                bottom: 0,
                right: 0,
                left: 0,
                child: Container(
                  height: incrementBoxHeight, //you can do it with mediaQuery
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        blurRadius: 5.0,
                        spreadRadius: 2.0,
                      ),
                    ],
                    color: Colors.blueAccent,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      GestureDetector(
                        onTap: decrementCounter,
                        child: CircleAvatar(
                          child: Icon(
                            Icons.remove,
                            size: 30,
                          ),
                        ),
                      ),
                      Text(
                        _counter.toString(),
                        style: TextStyle(fontSize: 48),
                      ),
                      GestureDetector(
                        onTap: incrementCounter,
                        child: CircleAvatar(
                            child: Icon(
                          Icons.add,
                          size: 30,
                        )),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        )),
      ),
    );
  }
}

and here is the result, you can edit to achieve your ui, because this is just a general structure of your interface!

Answer 2

you can use Stack widget.

visit this article for more