我想要在我的年龄输入屏幕上添加一些很酷的东西,我想要做的主要方式是让图像在年龄滑块增加时增长,在年龄滑块减少时缩小.这是一个非常简单的动画,我不知道如何实现,如果有人回答这个问题,我会非常感激.这是我当前年龄屏幕的截图(增长的图像有很大的空间):(判断下面的图像),以及屏幕截图的代码.谢谢!
编辑:对我来说非常有用的一个很大的好处是,随着用户增加滑块,动画从子元素变成成年人,再变成老年人.所以图像开始是一个子元素,变大了,变成了一个成年人,然后稍微缩小了一点,变成了一个年长的男人/女人.如果成功的话,我会非常棒的.再次感谢!
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();
},
),
),
),
]
)
)
)
);
}
}