How to switching the stack's widget of index

Question

How to switching the stack's widget smoothly when clicking the smaller widget, mentioned as the image below

When user has clicked Widget B, Widget B will zoom out, and Widget A will zoom in, and the stack position should be changed when clicked the smaller widget.

Any code sample for reference would be appreciated, thanks!

Answer 1

try this:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget _a = Container(
      color: Colors.red, width: double.infinity, height: double.infinity);
  Widget _b = Container(
      color: Colors.green, width: double.infinity, height: double.infinity);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        width: 400,
        height: 200,
        child: Stack(
          children: <Widget>[
            Container(
              width: 400,
              height: 200,
              child: _a,
            ),
            Positioned(
              bottom: 20,
              left: 20,
              child: GestureDetector(
                onTap: (){
                  Widget _swap = _b;
                  _b = _a;
                  _a = _swap;
                  setState((){});
                },
                child: Container(
                  width: 80,
                  height: 40,
                  child: _b,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}