Ios Flutter Aging Person 自定义小部件

所以我想给我正在开发的应用程序增加一点情趣，我有一个非常好和简单的 idea .现在有一个年龄屏幕页面，看起来像这样:(参见下面的img).我希望这个年龄屏幕在年龄滑块和继续按钮之间有一个婴儿(听我说完).当用户向上移动滑块时，婴儿会逐渐变老，而当滑块向下移动时，婴儿会逐渐变老.所以当滑块为10时，它会显示一个小男孩，当滑块为90时，它会显示一个老人.我希望这是一个平稳的过渡，它可以只是一个剪影(这是最好的工作).什么是最好的方式来做到这一点，如果你们中的任何人可以提供一个有效的代码片段，我将欠你们很多.谢谢!该代码是用于屏幕位于图像上方的.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:workout_app/Screens/Components/Sign_Up_Screens/screen1.dart';
import 'package:workout_app/Screens/Components/Sign_Up_Screens/screen3.dart';

class screen2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => Main();
}

class Main extends State<screen2> {
  void returnScreen(context) {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (context) => screen1(),
      ),
    );
  }

    
  @override
  void initState() {
    loadData();
    super.initState();
  }

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

  @override
  int age = 10;
  bool nextValid = false;

  void toast(String text) {
    final scaffold = ScaffoldMessenger.of(context);
    scaffold.showSnackBar(
      SnackBar(
        width: MediaQuery.of(context).size.width * .5,
        behavior: SnackBarBehavior.floating,
        content: Text(text),
        duration: const Duration(seconds: 1),
        elevation: 10,
      ),
    );
  }

  void submitData() async {
    if(nextValid == false) {
      toast('Please input your age');
      return;
    }
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setInt('age', age);
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (context) => SingleSelectListViewWithLogo(items : ['Tone Up - You want visible muscles with as little mass as possible and a low body fat percentage', 'Bulk Up - You want large, defined muscles, with a low percentage of body fat', 'Get Jacked - You want to lift an insane amount of weight and don\'t care about body fat or muscle definition']),
      ),
    );
  }

  void loadData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    try {
      int? x = prefs.getInt('age');
      print(x);
      if(x != null) {
        setState(() => {age = x, nextValid = true});
      }
    } catch (Exception){
      //continue;
    }
  }

  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Material(
      child: Scaffold(
      body: 
        Container (
          decoration: const BoxDecoration(color: Color.fromARGB(255, 94, 94, 94)),
          height: size.height,
          width: double.infinity,
          child: Stack(
            children: <Widget> [
              Positioned(
                top: size.height * .06,
                left: size.width * .03,
                child: InkWell(
                  onTap: () {
                    returnScreen(context);
                  },
                  child: Image.asset(
                    alignment: Alignment.topLeft,
                    "assets/images/back2.png",
                    width: size.width * .07,
                  ),
                ),
              ),
              Positioned (
                top: size.height * .33,
                width: size.width * .9,
                height: size.height * .47,
                left: size.width * .05,
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Image.asset(
                      "assets/images/screen2background.png",
                    ),
                  ),
                )
              ), 
              Positioned(
                top: size.height * .09,
                left: size.width * .42,
                child: const Text(
                  style: TextStyle(fontSize: 30, color: Color.fromARGB(255, 4, 3, 3)),
                  'Next,'
                )
              ),
              Positioned(
                top: size.height * .15,
                left: size.width * .16,
                child: const Text(
                  style: TextStyle(fontSize: 20, color: Color.fromARGB(255, 42, 42, 42)),
                  'Lets customize your workout!'
                )
              ),
              Positioned(
                top: size.height * .35,
                left: size.width * .15,
                child: const Text(
                  style: TextStyle(fontSize: 25, color: Color.fromARGB(255, 0, 0, 0), fontWeight: FontWeight.bold),
                  'What\'s your current age?'
                )
              ),
              Positioned (
                top: size.height * .5,
                left: size.width * .1,
                child: SliderTheme(
                  data: const SliderThemeData(
                    trackHeight: 30,
                    inactiveTrackColor: Color.fromARGB(255, 255, 255, 255),
                    activeTrackColor: Color.fromARGB(255, 0, 0, 0),
                    thumbColor: Colors.black,
                    disabledActiveTrackColor: Colors.black,
                    disabledInactiveTrackColor: Colors.black12,
                    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 25.0),
                  ),
                  child: Container (
                    width: size.width * .8,
                    child: Slider(
                      label: "Select Age",
                      value: age.toDouble(),
                      onChanged: (value) {
                        setState(() {
                          age = value.toInt();
                          nextValid = true;
                        });
                      },
                      min: 10,
                      max: 99,
                    )
                  )
                )
              ),
              Positioned (
                top: size.height * .42,
                left: size.width * .28,
                child: Text(
                  age.toString(),
                  style: const TextStyle(
                    fontSize: 40.0,
                  ),
                ),
              ),
              Positioned (
                top: size.height * .44,
                left: size.width * .42,
                child: const Text (
                  'years old',
                  style: TextStyle(
                    fontSize: 25.0,
                  ),
                )
              ),
              Positioned(
                top: size.height * .66,
                left: size.width * .1,
                child: SizedBox(
                  width: size.width * .8,
                  height: size.height * .08,
                  child: ElevatedButton(
                    style: ButtonStyle(                  
                      backgroundColor: MaterialStateProperty.all<Color>(!nextValid ? Color.fromRGBO(69, 75, 85, 1) : Color.fromARGB(255, 23, 100, 22)),
                    ),
                    child: const Text('Continue',
                      style: TextStyle(fontSize: 20),
                    ),
                    onPressed: () async {
                      submitData();
                    },
                  ),
                ),
              ),
            ]
          )
        )
      )
    );
  }
}