【发布时间】：2020-05-16 15:25:33
【问题描述】：
我在 Flutter 应用程序中以网格布局排列了多个容器。当这些容器小部件被点击时，会触发一个底部模式表。挑战在于，这些容器必须在每次按下它们时重复使用相同的底部模态表，同时在容器下方显示标题
创建了一个标题列表
List<String> statementTitle = [
'Accounts',
'Budget Performance',
'Cashflow',
'Income',
'Financial Position',
'Tax Assessment'
];
class Report extends StatefulWidget {
int index;
//Report (this.index);
Report({Key key, this.index}) : super(key: key);
@override
_ReportState createState() {
return _ReportState();
}
}
class _ReportState extends State<Report> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Report',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(35, 36, 44, 1)),
),
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 22),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 284,
width: 331,
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(24)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.027,
),
Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Text(
'Statement',
style: new TextStyle(
fontSize: 14.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.022,
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(242, 243, 255, 1),
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(context);
;
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height:
MediaQuery.of(context).size.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height:
MediaQuery.of(context).size.height *
0.015,
),
Text(
'Accounts',
style: new TextStyle(
fontSize: 10.0,
color: Color.fromRGBO(86, 89, 109, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
)
],
),
),
),
),
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(context);
;
});
},
child: Container(
height: 89,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height:
MediaQuery.of(context).size.height *
0.016,
),
Image.asset(
'images/doc.png',
scale: 2,
),
SizedBox(
height:
MediaQuery.of(context).size.height *
0.015,
),
Text(
'Budget\nPerformance',
style: new TextStyle(
fontSize: 10.0,
color: Color.fromRGBO(86, 89, 109, 1),
fontWeight: FontWeight.normal,
fontFamily: "Gordita"),
)
],
),
),
),
),
),
Widget _accountModalBottomSheet(context) {
return Container(
color: Color(0xFF737373),
height: MediaQuery.of(context).size.height * 0.6,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25),
topRight: const Radius.circular(25),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 22.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
child: Text(
// '$statementTitle',
statementTitle[widget.index],
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(35, 36, 44, 1),
fontSize: 18.0),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Text(
'Select a date range',
style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 14.0),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromRGBO(249, 249, 249, 1),
borderRadius: BorderRadius.circular(8)),
child: Row(
children: <Widget>[
Flexible(
child: Stack(
children: <Widget>[
Text(
'From',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.06,
),
Flexible(
child: Stack(
children: <Widget>[
Text(
'To',
style: TextStyle(
fontWeight: FontWeight.normal,
fontFamily: "Gordita",
color: Color.fromRGBO(98, 96, 116, 1),
fontSize: 12.0),
),
TextField(
decoration: InputDecoration(
prefixIcon: Container(
height: 16,
width: 16,
child: Image.asset('images/calendar.png'),
)),
)
],
),
)
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Stack(
children: <Widget>[
Text('Item'),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: DropdownButton<String>(
onChanged: categorySelected,
isExpanded: true,
value: "Weekly",
style: new TextStyle(
fontSize: 18.0,
color: Color.fromRGBO(35, 36, 44, 1),
fontWeight: FontWeight.w500,
fontFamily: "Gordita"),
items: <DropdownMenuItem<String>>[
const DropdownMenuItem<String>(
value: "Weekly", child: const Text("Weekly")),
const DropdownMenuItem<String>(
value: "Monthly", child: const Text("Monthly")),
const DropdownMenuItem<String>(
value: "Quarterly",
child: const Text("Quarterly")),
],
),
)
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.06,
),
Container(
height: 48.0,
width: double.infinity,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(8)),
child: RaisedButton(
color: Color.fromRGBO(68, 74, 213, 1),
onPressed: () {
Navigator.of(context).popAndPushNamed('/successReport');
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.width * 0.9,
),
Text(
'Fetch Report',
style: TextStyle(
color: Color.fromRGBO(235, 234, 250, 1),
fontSize: 14,
fontWeight: FontWeight.w500),
),
Icon(
Icons.arrow_forward,
color: Color.fromRGBO(235, 234, 250, 1),
)
],
),
),
)
],
),
),
));
}
void reportSelected(String value) {}
void categorySelected(String value) {}
}
【问题讨论】：
标签： android user-interface flutter dart