英文:
How to create animated gender selection page?
问题
I have built an app using Flutter. I want to create a gender selection page for it, currently I have a plain drop-down type button. I want to have an effect like this but I have no idea how to get this can anyone help?
@override
initState() {
pageController;
super.initState();
}
PageController? pageController =
PageController(initialPage: 1, viewportFraction: .5);
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
TabController tabController = TabController(length: 2, vsync:this);
List genders = [
Image.asset("assets/fitness_app/area1.png"),
Image.asset("assets/fitness_app/area3.png")];
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
premiumDialogue();
},
backgroundColor: primary,
child: const Icon(
Icons.add,
),
),
backgroundColor: bgcolor,
appBar: AppBar(
toolbarHeight: 70,
leadingWidth: 65,
backgroundColor: Colors.transparent,
centerTitle: true,
title: const Text(
"Home Workouts",
style: h2black,
),
elevation: 0,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: PageView.builder(
controller: pageController,
clipBehavior: Clip.antiAlias,
physics: const BouncingScrollPhysics(),
itemCount: genders.length,
itemBuilder: (context, index) {
return genders[index];
},
),
),
],
);
}
I have implemented this code but I was able to achieve this only.
What I achieved
英文:
I have built an app using Flutter. I want to create a gender selection page for it, currently I have a plain drop-down type button. I want to have an effect like this but I have no idea how to get this can anyone help?
@override
initState() {
pageController;
super.initState();
}
PageController? pageController =
PageController(initialPage: 1, viewportFraction: .5);
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
TabController tabController = TabController(length: 2, vsync:this);
List genders = [
Image.asset("assets/fitness_app/area1.png"),
Image.asset("assets/fitness_app/area3.png")];
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
premiumDialogue();
},
backgroundColor: primary,
child: const Icon(
Icons.add,
),
),
backgroundColor: bgcolor,
appBar: AppBar(
toolbarHeight: 70,
leadingWidth: 65,
backgroundColor: Colors.transparent,
centerTitle: true,
title: const Text(
"Home Workouts",
style: h2black,
),
elevation: 0,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: PageView.builder(
controller: pageController,
clipBehavior: Clip.antiAlias,
physics: const BouncingScrollPhysics(),
itemCount: genders.length,
itemBuilder: (context, index) {
return genders[index];
},
),
),
),
],
);
I have implemented this code but I was able to achieve this only.
What I achieved
答案1
得分: 0
有多种方法可以实现这一点，您可以在页面视图内使用页面视图，也可以使用AnimatedContainer小部件来动画选定图像的大小和颜色的更改。
bool _isMaleSelected = false;
bool _isFemaleSelected = false;
void _selectMale() {
setState(() {
_isMaleSelected = true;
_isFemaleSelected = false;
});
}
void _selectFemale() {
setState(() {
_isMaleSelected = false;
_isFemaleSelected = true;
});
}
return Scaffold(
body: Container(
padding: 根据您的需要设置内边距,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: Duration(milliseconds: 根据您的需要设置毫秒数),
height: _isMaleSelected ? height: height,
width: _isMaleSelected ? width: width,
decoration: BoxDecoration(
color: _isMaleSelected ? 根据您的需要设置颜色: 根据您的需要设置颜色,
decoration: 根据您的需要设置装饰
),
child: InkWell(
onTap: _selectMale,
child: Image.asset(
"您的图像路径",
height: 根据您的需要设置高度,
width: 根据您的需要设置宽度,
),
),
),
SizedBox(
height: 根据您的需要设置高度,
),
AnimatedContainer(
duration: Duration(milliseconds: 根据您的需要设置毫秒数),
height: _isFemaleSelected ? 根据您的需要设置高度: 根据您的需要设置高度,
width: _isFemaleSelected ? 根据您的需要设置宽度: 根据您的需要设置宽度,
decoration: BoxDecoration(
color: _isFemaleSelected ? 根据您的需要设置颜色: 根据您的需要设置颜色,
decoration: 根据您的需要设置装饰
),
child: InkWell(
onTap: _selectFemale,
// 其他部分省略
),
),
],
),
),
);
请注意，代码中的文本可能需要根据您的具体要求进行进一步修改。
英文:
There are many approaches to achieving this you can your the pageview inside page view you can use the AnimatedContainer widget to animate the change in size and color of the selected image.
bool _isMaleSelected = false;
bool _isFemaleSelected = false;
void _selectMale() {
setState(() {
_isMaleSelected = true;
_isFemaleSelected = false;
});
}
void _selectFemale() {
setState(() {
_isMaleSelected = false;
_isFemaleSelected = true;
});
}
return Scaffold(
body: Container(
padding: padding as per your requirement,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: Duration(milliseconds: as per your requirement),
height: _isMaleSelected ? height: height,
width: _isMaleSelected ? width: width:
decoration: BoxDecoration(
color: _isMaleSelected ? Colors as per your requirement: Colors as per your requirement,
and decoration as per your need
),
child: InkWell(
onTap: _selectMale,
child: Image.asset(
"your image path",
height: height as per your requirement,
width: width as per your requirement,
),
),
),
SizedBox(
height: height as per your requirement,
),
AnimatedContainer(
duration: Duration(milliseconds: as per your requirement),
height: _isFemaleSelected ? height as per your requirement: height as per your requirement,
width: _isFemaleSelected ? width as per your requirement: width as per your requirement,
decoration: BoxDecoration(
color: _isFemaleSelected ? Colors as per your requirement: Colors as per your requirement,
decoration as per your need
),
child: InkWell(
onTap: _selectFemale,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论