如何将容器放大到新屏幕？

Question

我正在尝试存档 UI 灵感来自 Dribble 的 Alex：https://dribbble.com/shots/14891203-Banking-Mobile-App。我尝试使用 Custom Pageview 和一些软件包，但我没有得到任何结果。我最终写了这样的东西

ScrollController _scrollController = new ScrollController();
double enlargeSize = 0;
double reduceSize = 1;
const mainColor = Color(0xff6D64ED);
const primaryColor = Color(0xff0170F2);
const fadedColor = Color(0xff5552A5);
const secColor = Color(0xff080F4A);

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          enlargeSize = _scrollController.offset < 0 ?
              -1*_scrollController.offset : 1;
        });
      });
  }

  @override
  void dispose() {
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {

    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          alignment: Alignment.center,
          children: [

            enlargeSize < 70 ?
            Align(
                alignment: Alignment.topCenter,
                child: Container(
                  // height: height*.25,
                    width: width*.95,
                    alignment: Alignment.centerLeft,
                    child: Center(
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        controller: _scrollController,
                        physics: BouncingScrollPhysics(),
                        children: <Widget>[

                          //Analytics
                          Container(
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      right: 20.0+(enlargeSize*5)
                                  ),
                                  child:  Container(
                                    width: (width*.4)+enlargeSize*1,
                                    height: (height*.21)+enlargeSize*3,
                                    decoration: homeBox.copyWith(
                                        color: secColor,
                                        borderRadius: BorderRadius.circular(28)
                                    ),
                                    alignment: Alignment.center,
                                    child: Text(
                                      'Catalogues',
                                      style: GoogleFonts.archivo(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: width*.4,
                                  height: height*.25,
                                  decoration: homeBox.copyWith(
                                    color: Colors.deepPurple[800],
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    'Analytics',
                                    style: GoogleFonts.archivo(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),

                          SizedBox(width: 0),
                          //Analytics
                          Center(
                            child: Container(
                              width: width*.4,
                              height: height*.25,
                              decoration: homeBox.copyWith(
                                color: primaryColor,
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                'Catalogues',
                                style: GoogleFonts.archivo(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),SizedBox(width: 8),
                          //AI Camera
                          Center(
                            child: Container(
                              width: width*.4,
                              height: height*.25,
                              decoration: homeBox.copyWith(
                                color: secColor,
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                'AI Camera',
                                style: GoogleFonts.archivo(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                )
            ):
            GestureDetector(
              onHorizontalDragUpdate: (DragUpdateDetails details){
                print("Details : ${details.delta.dx} ");
                setState(() {
                  details.delta.dx > 0 ?
                  reduceSize = 1:
                  reduceSize = details.delta.dx;

                });
              },
              child: Align(
                alignment: Alignment.center,
                child: Container(
                  width: width,
                  height: height,
                  decoration: homeBox.copyWith(
                      color: secColor,
                      borderRadius: BorderRadius.circular(0)
                  ),

                  child: Stack(
                    children: [
                      // Container(
                      //   color: secColor,
                      // ),

                      Align(
                        alignment: Alignment.topCenter,
                        child: AppBar(
                          centerTitle: true,
                          backgroundColor: secColor,
                          title: Text(
                            'Catalogues',
                            style: GoogleFonts.archivo(
                              color: Colors.white,
                              fontWeight: FontWeight.w700,
                              fontSize: 16
                            ),
                          ),
                          leading: IconButton(
                            onPressed: (){
                              setState(() {
                                enlargeSize = 1;
                              });
                            },
                            icon: Icon(Icons.arrow_back_ios_rounded),
                            color: Colors.white,

                          ),
                        ),
                      ),



                    ],
                  )
                ),
              ),
            ),

          ],
        )
      )
    );
  }

它看起来仍然不完全像 UI，请帮助或建议我如何更好地存档它。 如果我不清楚或者我是否需要以不同的方式重写我的问题，也请告诉我。

Answer 1

animations 软件包可能对此有所帮助。

Answer 2

最简单的方法是在堆栈中使用 AnimatedContainer。

但最好的方法是使用 Mickael Hrndz 提到的动画包