我想要在我的年龄输入屏幕上添加一些很酷的东西,我想要做的主要方式是让图像在年龄滑块增加时增长,在年龄滑块减少时缩小.这是一个非常简单的动画,我不知道如何实现,如果有人回答这个问题,我会非常感激.这是我当前年龄屏幕的截图(增长的图像有很大的空间):(判断下面的图像),以及屏幕截图的代码.谢谢!

编辑:对我来说非常有用的一个很大的好处是,随着用户增加滑块,动画从子元素变成成年人,再变成老年人.所以图像开始是一个子元素,变大了,变成了一个成年人,然后稍微缩小了一点,变成了一个年长的男人/女人.如果成功的话,我会非常棒的.再次感谢!

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, 46, 46, 46)),
          height: size.height,
          width: double.infinity,
          child: Stack(
            children: <Widget> [
              Positioned (
                top: size.height * .34,
                height: size.height * .6,
                width: size.width * .9,
                left: size.width * .05,
                child: Container (
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: Color.fromARGB(255, 73, 73, 73),
                  ),
                ),
              ),
              Positioned(
                top: size.height * .06,
                left: size.width * .03,
                child: InkWell(
                  onTap: () {
                    returnScreen(context);
                  },
                  child: Image.asset(
                    alignment: Alignment.topLeft,
                    "assets/images/whitebackarrow.png",
                    width: size.width * .07,
                  ),
                ),
              ), 
              Positioned(
                top: size.height * .09,
                left: size.width * .35,
                child: const Text(
                  style: TextStyle(fontSize: 50, color: Color.fromARGB(255, 255, 255, 255), fontWeight: FontWeight.bold),
                  'Next,'
                )
              ),
              Positioned(
                top: size.height * .19,
                left: size.width * .06,
                child: const Text(
                  style: TextStyle(fontSize: 25, color: Color.fromARGB(255, 255, 255, 255)),
                  'Lets customize your workout!'
                )
              ),
              Positioned(
                top: size.height * .38,
                left: size.width * .13,
                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 * .7,
                left: size.width * .1,
                child: SliderTheme(
                  data: const SliderThemeData(
                    trackHeight: 30,
                    inactiveTrackColor: Color.fromARGB(255, 160, 160, 160),
                    activeTrackColor: Color.fromARGB(255, 40, 39, 39),
                    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 * .605,
                left: size.width * .25,
                child: Text(
                  age.toString(),
                  style: const TextStyle(
                    fontSize: 50.0,
                    fontWeight: FontWeight.bold
                  ),
                ),
              ),
              Positioned (
                top: size.height * .64,
                left: size.width * .42,
                child: const Text (
                  'years old',
                  style: TextStyle(
                    fontSize: 25.0,
                  ),
                )
              ),
              Positioned(
                top: size.height * .825,
                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();
                    },
                  ),
                ),
              ),
            ]
          )
        )
      )
    );
  }
}

Age Screen. This is the code for the screen:

推荐答案

现在回答有点晚了.为了达到同样的效果,我做了以下工作.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const MyPage(),
  ));
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider Example'),
      ),
      body: const Center(
        child: Card(
          child: CustomSlider(),
        ),
      ),
      bottomSheet: SafeArea(
        child: BottomSheet(
            onClosing: () {},
            builder: (ctx) {
              return const Padding(
                padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
                child: Text(
                    'ℹ️ The gender choices and corresponding emojis shown here are for demonstration purpose only and does not reflect my view in any manner.'),
              );
            }),
      ),
    );
  }
}

class CustomSlider extends StatefulWidget {
  const CustomSlider({
    super.key,
  });

  @override
  State<CustomSlider> createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  var _age = 21;
  final _data = {
    const IntRange(0, 6): {'m': '??', 'f': '??'},
    const IntRange(7, 18): {'m': '?', 'f': '?'},
    const IntRange(19, 60): {'m': '?‍♂️', 'f': '?'},
    const IntRange(61, 100): {'m': '?', 'f': '?'},
  };
  var _gender = 'f';

  @override
  Widget build(BuildContext context) {
    final range = _data.keys.firstWhere((range) => _age.within(range));
    final text = _data[range]![_gender]!;
    final size = 72 + (_age - range.start) / (range.end - range.start) * 50;

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          'What\'s your current age?',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        const SizedBox(
          height: 20,
        ),
        Center(
          child: SizedBox.square(
            dimension: 300,
            child: Center(
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 700),
                child: Text(
                  key: ValueKey(text),
                  text,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: size),
                ),
              ),
            ),
          ),
        ),
        Slider(
          value: _age.toDouble(),
          onChanged: _onAgeChanged,
          min: 0,
          max: 100,
          divisions: 101,
        ),
        const SizedBox(
          height: 20,
        ),
        Text(
          'Your current age $_age',
          style: const TextStyle(fontSize: 24),
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio<String>(
              value: 'm',
              groupValue: _gender,
              onChanged: _onGenderChanged,
            ),
            const Text('Male'),
            const SizedBox(
              width: 20,
            ),
            Radio<String>(
              value: 'f',
              groupValue: _gender,
              onChanged: _onGenderChanged,
            ),
            const Text('Female'),
          ],
        )
      ],
    );
  }

  void _onAgeChanged(double value) {
    _age = value.toInt();
    setState(() {});
  }

  void _onGenderChanged(newValue) {
    _gender = newValue!;
    setState(() {});
  }
}

@immutable
class IntRange {
  final int start;
  final int end;

  const IntRange(
    this.start,
    this.end,
  );

  @override
  String toString() => 'IntRange(start: $start, end: $end)';

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;

    return other is IntRange && other.start == start && other.end == end;
  }

  @override
  int get hashCode => start.hashCode ^ end.hashCode;
}

extension Range on int {
  bool within(IntRange range) {
    return this >= range.start && this <= range.end;
  }
}

演示:https://youtube.com/shorts/CyymV-GQvj4?feature=share

PS:我知道已经有了一个公认的答案.我想为什么不在这里分享它,因为解决方案已经准备好了.

Ios相关问答推荐

在iOS 17脉冲符号效果不起作用的情况下制作UIBarButtonItem动画(没有UIImageView)

我应该使用哪个UIButton发送事件在SWIFT上刷卡?

安装新版本 XCode 15.0 后无法运行应用程序 XCode

Strange UIView.animate更改UIButton标题 colored颜色 的行为

查找东南亚语言(泰语、高棉语、老挝语、缅甸语)中的单词边界

CGPath intersection(_:using:) 和朋友(iOS 16 中的新功能)坏了?

Task.cancel() 的 TaskPriority 的区别

使用 SceneKit 从 CapturedRoom.walls 重新创建 RoomPlan

如何 comments .plist 文件中的行?

Watchkit AppIcon - 名为AppIcon的应用图标集没有任何适用的内容

Xcode 缺少支持文件 iOS 12.2 (16E227)

iOS swift从另一个数组中删除一个数组的元素

如何在 Xcode 4 中切换 .h 和 .m

如何将 iPhone OSStatus 代码转换为有用的东西?

UIButton 事件.有什么不同?

在 iOS 8.1 模拟器上更改语言不起作用

如何使用 Contacts Framework 获取 iOS 9 中的所有联系人记录

应用程序不包含正确的测试版权利

关闭通过模态 segue 显示的视图

判断密钥是否存在于 NSDictionary 中