Вы можете скопировать и вставить полный код ниже
Вы можете использовать for loop для генерации Widget вам нужно и передать statementTitle[i]
фрагмент кода
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 3; i < statementTitle.length; i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
...
Widget _accountModalBottomSheet(context, String statementTitle) {
return Container(
color: Color(0xFF737373),
рабочая демонстрация
полный код
import 'package:flutter/material.dart';
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: 400,
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: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 0; i < 3; i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
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(
statementTitle[i],
style: new TextStyle(
fontSize: 10.0,
color:
Color.fromRGBO(
86,
89,
109,
1),
fontWeight:
FontWeight
.normal,
fontFamily:
"Gordita"),
)
],
),
),
),
),
]),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
for (int i = 3;
i < statementTitle.length;
i++)
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return _accountModalBottomSheet(
context,
statementTitle[i]);
});
},
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(
statementTitle[i],
style: new TextStyle(
fontSize: 10.0,
color:
Color.fromRGBO(
86,
89,
109,
1),
fontWeight:
FontWeight
.normal,
fontFamily:
"Gordita"),
)
],
),
),
),
),
]),
],
))
]))
]))));
}
Widget _accountModalBottomSheet(context, String statementTitle) {
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) {}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Report(index: 0),
);
}
}