提问人：Badriya Haddad 提问时间：12/22/2021 最后编辑：Ravindra S. PatilBadriya Haddad 更新时间：12/22/2021 访问量：62
如何使这两个圆形容器可供选择？
how can make this two circular containers selectable?
问：
我是 flutter 的新手
还有很多事情我一无所知
我的问题是如何使这两个圆形容器看起来可选择，这意味着当单击（例如：老师）并按 GO！，它在功能上可以工作并导航到另一个屏幕，但它的问题没有显示容器被选中！
另一个问题是当用户点击它们时
我希望GO按钮的颜色从浅紫色变为深紫色！
虽然我已经尝试过 SelectableContainer，但它没有按照我的意愿
工作，这就是我想要的！这就是我想要的
这就是我应用它的方式：这就是我应用它的方式
这是我的代码!!
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:blackboard/setting/colors.dart';
import 'package:blackboard/view/welcome1.dart';
import 'package:blackboard/setting/tapbar.dart';
class AreYou1 extends StatefulWidget {
const AreYou1({Key? key}) : super(key: key);
@override
_AreYou1State createState() => _AreYou1State();
}
class _AreYou1State extends State<AreYou1> {
int select = 0;
bool _select1 = false;
bool _select2 = false;
@override
void initState() {
// TODO: implement initState
super.initState();
select = 0;
}
@override
Widget build(BuildContext context) {
//Teacher Button
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 0;
});
},
child: Image.asset(
"assets/images/teacher.png",
fit: BoxFit.cover,
),
)),
);
//Student Button
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 1;
});
},
child: Image.asset(
"assets/images/student.png",
fit: BoxFit.cover,
),
)));
return Scaffold(
backgroundColor: BBColors.bg4,
body: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
overflow: Overflow.clip,
children: [
Positioned(
right: -160,
top: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
right: 20,
top: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: -160,
bottom: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
left: 20,
bottom: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: 120,
top: 250,
child: Text(
"Are You ? ",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
color: Colors.black,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
)),
Positioned(
top: 350,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TeacherButton,
SizedBox(
width: 40,
),
StudentButton,
]),
),
Positioned(
top: 605,
left: 120,
child: Card(
color: Colors.white24,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60),
),
child: Container(
decoration: BoxDecoration(
color: BBColors.primary5,
borderRadius: BorderRadius.all(Radius.circular(60)),
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 2.3,
onPressed: () {
if (select == 0) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Welcome1()));
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TapBar()));
}
},
child: Text(
"GO !",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
color: BBColors.font1,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
),
)))),
]));
}
}
答：
0赞
Chirag Kothiya
12/22/2021
#1
您可以查看以下代码，我根据需要创建新的 TeacherButton 和 StudentButton。
bool isSelectTeacher = false;
新 TeacherButton：
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 8 : 0,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = true;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 30 : 0)),
),
],
),
),
);
新学生按钮：
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 0 : 8,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = false;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 0 : 30)),
),
],
),
),
);
评论