I have a complex UI , am displaying a listViewbuilder composed of many expansion tiles.
At first , I retrieve the list of data show it , then I call on another function to which I give the id of my object to display details when I click on the expansion tile . The only problem here , is that the code complexity is too high , say we have 20 items in the list every time I call the function that returns the details of my item using futurebuilder or provider it will call the function 20 times even though I didn't click on the expansion tile to view the details. I want to be able to call my future function only when I click on the expansion tile.
this is my view :
enter image description here
and this is my code using provider and future builder
child: FutureBuilder(
future: futureQrqc,
builder: (BuildContext context,
AsyncSnapshot<QrqcDetails?> snapshot) {
if (snapshot.hasData) {
String? backgroundImage;
String? _setImage() {
String _mTitle = "${snapshot.data!.type}";
if(_mTitle == "Delivery") {
backgroundImage = "assets/icons/delivery.png";
} else if(_mTitle == "Security") {
backgroundImage = "assets/icons/security.png";
}
else if(_mTitle == "Quality") {
backgroundImage = "assets/icons/quality.png";
}
else if(_mTitle == "Cost") {
backgroundImage = "assets/icons/Cost.png";
}
else if(_mTitle == "People") {
backgroundImage = "assets/icons/people.png";
}
print("_mTitle: $_mTitle");
print("_mTitle: $backgroundImage");
return backgroundImage; // here it returns your _backgroundImage value
}
return Column(
children: [
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'INIT',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.orange,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'INIT',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: QrqcCardtrailing(percent: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),text: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),),
children: [
QrqcDetailsCardFirstRow(product: snapshot.data?.product?? "No product" ,role: myQrqcListViewModel
.articlesList[index].role, ),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
convertDateTimeDisplay(snapshot.data!.creation_date),
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'SUBMITTED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.blueAccent,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'SUB',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'VALIDATED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.green,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'VALID',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
);
} else if (snapshot.hasError) {
return NoDataUI();
}
print(snapshot.error.toString());
return const Center(
child: CircularProgressIndicator());
})
If anyone can help please don't hesitate , this is an important issue to optimise my code before launching my app for users on stores . Thank you so much and happy coding :)
You can wrap your ExpansionTile with GestureDetector or InkWell and call the function in onTap method.
Related
I'fetching data from my API and want to display the data in a ExpansionPanelList. Now I have the problem, that every time when i want to fold out a Panel it closes immediately. Thanks for helping, here my Code:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:http/http.dart' as http;
class Job {
final String vorname;
final String nachname;
bool isExpanded;
Job({
required this.vorname,
required this.nachname,
required this.isExpanded,
});
factory Job.fromJson(Map<String, dynamic> json) {
return Job(
vorname: json['vorname'],
nachname: json['nachname'],
isExpanded: false,
);
}
}
Future<List<Job>> fetchJobs() async {
final response = await http.get(Uri.parse('http://10.0.2.2:8000/api/jobs'));
if(response.statusCode == 200){
List jsonResponse = json.decode(response.body);
return jsonResponse.map((data) => Job.fromJson(data)).toList();
} else {
throw Exception('failed to load job');
}
}
class AuftraegePage extends StatefulWidget {
#override
_AuftraegePage createState() => _AuftraegePage();
}
class _AuftraegePage extends State<AuftraegePage>{
String selectedDay = DateFormat('dd.MM.yyyy').format(DateTime.now());
final List<Map<String, dynamic>> _items = List.generate(
10,
(index) => {
'id': index,
'title': 'Max Mustermann',
'description':
'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
'isExpanded': false,
});
void _showDatePicker(){
showDatePicker(
locale: const Locale('de', 'DE'),
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(1970),
lastDate: DateTime(2050),
builder: (context, child) {
return Theme(
data: ThemeData.light().copyWith(
colorScheme: ColorScheme.light(
primary: Color(0xff1f6526),
onPrimary: Colors.white,
onSurface: Colors.black,
),
dialogBackgroundColor:Colors.white,
),
child: child!,
);
},
).then((value) {
setState(() {
String _dateTime = DateFormat('dd.MM.yyy', 'de_DE').format(value!);
selectedDay = _dateTime;
});
} );
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.grey[300],
child: SingleChildScrollView(
padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 4.0),
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget> [
const SizedBox(height: 20),
const Text('Aufträge',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 15),
buildDatePicker(),
const SizedBox(height: 20),
buildCreateButton(),
const SizedBox(height: 20),
buildListOfJobs(),
],
),
),
);
}
Widget buildListOfJobs(){
return FutureBuilder<List<Job>>(
future: fetchJobs(),
builder: (context, snapshot) {
if(snapshot.hasData){
return ExpansionPanelList(
dividerColor: Colors.grey[700],
elevation: 3,
// Controlling the expansion behavior
expansionCallback: (index, isExpanded) {
setState(() {
snapshot.data![index].isExpanded = !isExpanded;
print(snapshot.data![index].isExpanded);
});
},
animationDuration: Duration(milliseconds: 600),
children: snapshot.data!.map(
(item) => ExpansionPanel(
canTapOnHeader: true,
backgroundColor:
item.isExpanded == true ? Colors.grey[300] : Colors.grey[300],
headerBuilder: (context, isExpanded){
return Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.vorname,
style: TextStyle(
fontSize: 18.0,
),
),
SizedBox(height: 5),
Wrap(
children: <Widget>[
Icon(
Icons.access_time_filled,
size: 22.0,
),
SizedBox(
width:5,
),
Text('07:00 - 07:13',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15
),)
],
),
],
)
);
},
body: Container(
color: Colors.grey[300],
padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
child: Column(
children: [
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.user,
size: 19,),
SizedBox(
width:5,
),
Text('Mitglied: OGV Imst ',
style: TextStyle(
fontSize: 15,
),),
],
),
),
Expanded(
flex: 4,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.locationDot,
size: 19),
SizedBox(
width:5,
),
Text('Ort: Imst',
style: TextStyle(
fontSize: 15,
)),
],
),
),
],
),
SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.weightHanging,
size: 19,),
SizedBox(
width:5,
),
Text('Menge: 300 ',
style: TextStyle(
fontSize: 15,
),),
],
),
),
Expanded(
flex: 4,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.wineBottle,
size: 19,),
SizedBox(
width:5,
),
Text('Most: 0',
style: TextStyle(
fontSize: 15,
)),
],
),
),
],
),
SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.bottleDroplet,
size: 19,),
SizedBox(
width:5,
),
Text('Flaschen: 0',
style: TextStyle(
fontSize: 15,
),),
],
),
),
Expanded(
flex: 4,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.bagShopping,
size: 19,),
SizedBox(
width:5,
),
Text('Bag: 0',
style: TextStyle(
fontSize: 15,
)),
],
),
),
],
),
SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.box,
size: 19,),
SizedBox(
width:5,
),
Text('Karton: 0',
style: TextStyle(
fontSize: 15,
),),
],
),
),
],
),
SizedBox(height: 10),
Divider(color: Colors.black,),
SizedBox(height: 10),
Row(
children: [
Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.message,
size: 19,),
SizedBox(
width:5,
),
Text('Anmerkungen: ',
style: TextStyle(
fontSize: 15,
),),
],
),
],
),
SizedBox(height: 10),
Divider(color: Colors.black,),
SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.tasks,
size: 19,),
SizedBox(
width:5,
),
Text('Bestätigt: Nein',
style: TextStyle(
fontSize: 15,
),),
],
),
),
Expanded(
flex: 4,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.xmark,
size: 19,),
SizedBox(
width:5,
),
Text('Stoniert: Nein',
style: TextStyle(
fontSize: 15,
)),
],
),
),
],
),
SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 5,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.eye,
size: 19,),
SizedBox(
width:5,
),
Text('Noshow: Nein',
style: TextStyle(
fontSize: 15,
),),
],
),
),
Expanded(
flex: 4,
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.check,
size: 19,),
SizedBox(
width:5,
),
Text('Erledigt: Nein',
style: TextStyle(
fontSize: 15,
)),
],
),
),
],
),
SizedBox(height: 20),
Row(
children: [
Expanded(
flex: 5,
child: ElevatedButton(
onPressed:_showDatePicker,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
elevation: 5,
padding: EdgeInsets.all(13),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
),
child: Wrap(
children: const <Widget>[
Icon(FontAwesomeIcons.edit,
color: Colors.white,
size: 20.0,
),
SizedBox(
width:5,
),
Text(
'Bearbeiten',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
),
),
SizedBox(width: 10),
Expanded(
flex: 5,
child: ElevatedButton(
onPressed:_showDatePicker,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.yellow[600],
elevation: 5,
padding: EdgeInsets.all(13),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
),
child: Wrap(
children: <Widget>[
Icon(FontAwesomeIcons.file,
color: Colors.black,
size: 20.0,
),
SizedBox(
width:5,
),
Text(
'Rechnung',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
],
),
),
),
],
),
],
),
),
isExpanded: item.isExpanded,
),
).toList(),
);
} else if(snapshot.hasError) {
return Text('${snapshot.error}');
//return Text('keine Daten gefunden');
}
return const CircularProgressIndicator();
},
);
}
Widget buildDatePicker(){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Datum wählen: ',
style: TextStyle(
fontSize: 20,
),
),
ElevatedButton(
onPressed:_showDatePicker,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[700],
elevation: 5,
padding: EdgeInsets.all(13),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
),
child: Wrap(
children: <Widget>[
Icon(
Icons.date_range,
color: Colors.white,
size: 20.0,
),
SizedBox(
width:5,
),
Text(
selectedDay,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
),
],
);
}
Widget buildCreateButton(){
return ElevatedButton(
onPressed:_showDatePicker,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[700],
minimumSize: const Size.fromHeight(50),
elevation: 5,
padding: EdgeInsets.only(left: 35, right: 20, top: 13, bottom: 13),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
),
child: Wrap(
children: <Widget>[
Text(
'Auftrag erstellen',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
SizedBox(
width:5,
),
Icon(
Icons.add_card ,
color: Colors.white,
size: 20.0,
),
],
),
);
}
}
I think there could be an issue during fetching the data, because I think with every click my data get reloaded and "isExpanded" is set to *false * again.
You can replace future: fetchJobs() with by creating a state future variable. It will prevent unwanted api call.
late final jobListFuture = fetchJobs();
#override
Widget build(BuildContext context) {
Widget buildListOfJobs(){
return FutureBuilder<List<Job>>(
future: jobListFuture,
I got an error while using Flutter to create a screen that shows the status of a user.
Null safety error, but I don't know the solution.
The following error message occurred while implementing the process to display the received data of API on the screen.
Error message
The following _CastError was thrown building Consumer<Status>(dirty, dependencies: [_InheritedProviderScope<Status?>]):
Null check operator used on a null value
The relevant error-causing widget was:
Consumer<Status> Consumer:file:///Users/username/StudioProjects/app_name/lib/screens/user_status.dart:55:14
(services/user_status.dart)
import 'package:flutter/material.dart';
import 'package:delivery_kun/models/user_status.dart';
import 'package:dio/dio.dart' as Dio;
import 'package:intl/intl.dart';
import 'dio.dart';
class Status extends ChangeNotifier {
UserStatus? _userStatus;
UserStatus get status => _userStatus!;
String getDate() {
return DateFormat('yyyyMMdd').format(DateTime.now()).toString();
}
void getStatus(int user_id) async {
String date = getDate();
Dio.Response response = await dio()
.get('/status', queryParameters: {'date': date, 'user_id': user_id});
_userStatus = UserStatus.fromJson(response.data);
notifyListeners();
}
}
(models/user.dart)
class UserStatus {
final String onlineTime;
final int daysEarningsTotal;
final int daysEarningsQty;
final String vehicleModel;
final int actualCost;
UserStatus(
{required this.onlineTime,
required this.daysEarningsTotal,
required this.daysEarningsQty,
required this.actualCost,
required this.vehicleModel});
UserStatus.fromJson(Map<String, dynamic> json)
: onlineTime = json['data']['summary']['onlineTime'],
daysEarningsTotal = json['data']['summary']['daysEarningsTotal'],
actualCost = json['data']['summary']['actualCost'],
daysEarningsQty = json['data']['summary']['daysEarningsQty'],
vehicleModel = json['data']['user']['vehicleModel'];
}
screen
class LoggedInUserStatus extends StatelessWidget {
LoggedInUserStatus({required this.user_id});
int user_id;
#override
Widget build(BuildContext context) {
context.read<Status>().getStatus(user_id);
return Container(
child: Consumer<Status>(
builder: (context, status, child) => Column(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.only(top: 20),
child: Text(
DateFormat('yyyy年M月d日').format(DateTime.now()),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
)),
Container(
height: 250,
color: Colors.grey,
),
Container(
margin: EdgeInsets.only(right: 15, left: 15),
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 10),
child: Text(
'ステータス',
style: TextStyle(
fontSize: 25,
),
)),
Table(
border: TableBorder(
bottom:
BorderSide(width: 0.5, color: Color(0xFF000000)),
),
children: [
TableRow(children: [
Text(
'時間',
style: TextStyle(color: Colors.grey),
),
Text('数', style: TextStyle(color: Colors.grey))
]),
TableRow(children: [
TableCell(
child: SizedBox(
height: 50,
child: Text(
status.status.onlineTime,
style: TextStyle(
fontSize: 20,
),
),
),
),
TableCell(
child: SizedBox(
height: 50,
child: Text(
status.status.daysEarningsQty.toString(),
style: TextStyle(
fontSize: 20,
),
),
),
),
]),
]),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 10),
child: Text(
'明細',
style: TextStyle(
fontSize: 30,
),
)),
Table(children: [
TableRow(children: [
Text(
'売上',
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
Text(status.status.daysEarningsTotal.toString(),
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.black,
fontSize: 20,
))
]),
TableRow(children: [
TableCell(
child: SizedBox(
height: 50,
child: Text(
'支出',
style: TextStyle(
fontSize: 20,
),
),
),
),
TableCell(
child: SizedBox(
height: 50,
child: Text(
status.status.actualCost.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 20,
),
),
),
),
]),
TableRow(children: [
TableCell(
child: SizedBox(
height: 50,
child: Text(
'利益',
style: TextStyle(
fontSize: 20,
),
),
),
),
TableCell(
child: SizedBox(
height: 50,
child: Text(
(status.status.daysEarningsTotal -
status.status.actualCost)
.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 20,
),
),
),
),
]),
]),
ElevatedButton(
onPressed: () {},
child: Text( 'ボタン'),
style: ElevatedButton.styleFrom(
primary: Colors.grey,
minimumSize: Size(double.infinity, 55),
),
),
],
))
],
),
),
);
}
}
I created a CheckBox list, where I get the verified value of the endpoint as false, but when changing the setstate it changes to true but then returns to false, i think FuturueBuilder rebuild CheckLists when setstate is called... But i have no idea how fix it.
e.checked is parsed ...snapshot.data!.secoes![i].checklists! .map<Widget>((e) attribute coming from the model that it receives through the api, for each checkListTile there must be a value to change in onChanged.
SingleChildScrollView newAppointmentBody() {
return SingleChildScrollView(
child: FutureBuilder<AppointmentRepository>(
future: _newReport(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 30),
child: Form(
key: _formKey,
child: SizedBox(
child: Card(
elevation: 3,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 30),
child: Column(
children: [
Row(
children: [
const Text(
'Emissor: ',
style: TextStyle(
fontSize: 16,
),
),
Text(
'${widget.employee} ',
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
)
],
),
const SizedBox(
height: 30,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Setor do Emissor *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _status,
items: dropdownSetorEmissor,
onChanged: (String? chooseValue) {
setState(
() {
selectedSetor = chooseValue!;
_status = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Turno do Emissor *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _emissor,
items: dropdownTurnoEmissor,
onChanged: (String? chooseValue) {
setState(
() {
selectEmissor = chooseValue!;
_emissor = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Setor do risco / ocorrência *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _risco,
items: dropdownSetorRisco,
onChanged: (String? chooseValue) {
setState(
() {
selectRisco = chooseValue!;
_risco = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Local / Equipamento *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
TextFormField(
controller: _controllerLocalEquip,
maxLines: 3,
focusNode: focus,
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Fonte *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _fonte,
items: dropdownFonte,
onChanged: (String? chooseValue) {
setState(
() {
selectFonte = chooseValue!;
_fonte = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Caracterização *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _caracterizacao,
items: dropdownCaracterizacao,
onChanged: (String? chooseValue) {
setState(
() {
selectCaracterizacao = chooseValue!;
_caracterizacao = chooseValue;
if (chooseValue
.contains('Segurança do Trabalho')) {
isCheckList = true;
} else {
isCheckList ^= isCheckList;
}
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Prioridade *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _prioridade,
items: dropdownPrioridade,
onChanged: (String? chooseValue) {
setState(
() {
selectPrioridade = chooseValue!;
_prioridade = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Reincidência *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
),
],
),
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: const Text(
'Moderado?',
style: TextStyle(
fontSize: 20, color: Colors.black54),
),
isExpanded: true,
value: _reincidencia,
items: dropdownReincidencia,
onChanged: (String? chooseValue) {
setState(
() {
selectReincidencia = chooseValue!;
_reincidencia = chooseValue;
},
);
},
),
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
GestureDetector(
child: const Text(
'Dicas',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700),
),
onTap: () => alertDialogShowTips(),
),
],
),
const SizedBox(
height: 15,
),
const Divider(
thickness: 2,
),
const SizedBox(
height: 15,
),
Visibility(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 6,
itemBuilder: (context, i) {
snapshot.data!.secoes![i].checklists!.map(
(e) => setState(() => isChecked = e.checked),
);
return Column(
children: <Widget>[
Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 15),
color: Colors.grey[200],
child: Row(
children: [
Text(
'${snapshot.data!.secoes![i].nome}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 30,
),
],
),
),
...snapshot.data!.secoes![i].checklists!
.map(
(e) {
return CheckboxListTile(
title: Text('${e.quesito}'),
value: e.checked,
onChanged: (value) {
setState(() {
e.checked ^= value!;
print(e.checked);
});
},
);
},
).toList(),
],
);
},
),
visible: isCheckList,
),
SizedBox(
height: 50,
width: 250,
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: const BorderSide(
color: Colors.transparent),
),
),
backgroundColor:
MaterialStateProperty.all(Colors.black),
),
onPressed: () => _getFromCamera(),
child: const Text(
'Adicionar foto',
style: TextStyle(fontSize: 22),
),
),
),
const SizedBox(
height: 30,
),
SizedBox(
height: 50,
width: 250,
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: const BorderSide(
color: Colors.transparent),
),
),
backgroundColor:
MaterialStateProperty.all(Colors.black),
),
onPressed: () => _getFromGalery(),
child: const Text(
'Adicionar imagem',
style: TextStyle(fontSize: 22),
),
),
),
const SizedBox(
height: 30,
),
image != null
? AnimatedOpacity(
opacity: image != null ? 1 : 0,
duration: const Duration(milliseconds: 500),
child: AspectRatio(
aspectRatio: 2 / 3,
child: image != null
? Image.file(
_image,
scale: 1,
)
: null,
),
)
: const SizedBox(),
const SizedBox(
height: 30,
),
Row(
children: const [
Text(
'Descrição da Anomalia *',
style:
TextStyle(color: Colors.grey, fontSize: 16),
)
],
),
TextFormField(
maxLines: 5,
),
const SizedBox(
height: 30,
),
Row(
children: const [
Text(
'Ação Imediata',
style:
TextStyle(color: Colors.grey, fontSize: 16),
)
],
),
TextFormField(
maxLines: 5,
),
const SizedBox(
height: 30,
),
Row(
children: const [
Text(
'Ação Sugerida',
style:
TextStyle(color: Colors.grey, fontSize: 16),
)
],
),
TextFormField(
maxLines: 5,
),
const SizedBox(
height: 45,
),
SizedBox(
height: 50,
width: double.infinity,
child: ElevatedButton(
onPressed: () {
_newReport();
},
child: const Text('SALVAR'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.green),
),
),
),
],
),
),
),
),
),
);
}
return Container();
},
),
);
}
How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}
So I'm new to flutter, and I'm trying to make a card. But I can't seem to get my desired output.
I tried to separate the different widgets, by using rows and columns, but I kept messing it up.
This is my target output
Target output
This is my current progressCurrent progress
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildhomePageAppBar(),
body: buildExhibitorBody(),
);
}
Widget buildExhibitorBody() {
return Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
buildExhibitorText(),
SizedBox(
height: 10,
),
buildExhibitorCards(),
SizedBox(height: 10),
],
),
),
);
}
Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
backgroundColor: Colors.white,
titleSpacing: 0,
title: Padding(
padding: EdgeInsets.only(
left: 20,
),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Image(
image: AssetImage('assets/images/plain_logo.png'),
height: 30,
),
),
SizedBox(width: 5),
Text(
'Virtex',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
)
],
),
),
actions: [
Padding(
padding: EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Container(
height: profileDimension,
width: profileDimension,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black54,
width: 2,
),
borderRadius: BorderRadius.circular(50),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image(
width: profileDimension,
height: profileDimension,
image: AssetImage(
'assets/images/profile-image.jpeg',
),
fit: BoxFit.cover,
),
),
),
),
SizedBox(width: 20),
],
);
}
Widget buildExhibitorText() {
return Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
top: 20,
bottom: 10,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
"Exhibitors",
textAlign: TextAlign.justify,
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.2,
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
);
}
Widget buildExhibitorCards() { // I think my problem is I don't know how to do the layout here
return Container(
width: 400,
height: 150,
child: Column(children: <Widget>[
Card(
elevation: 1,
child: Padding(
padding: const EdgeInsets.only(),
child: Row(children: [
buildCardImage(),
buildCardExhibitor(),
buildCardIndustry(),
buildCardGo(),
])),
),
]),
);
}
Widget buildCardExhibitor() {
return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
padding: EdgeInsets.all(10),
width: 40,
height: 40,
child: Center(
child: Row(
children: <Widget>[
Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
Text('Exhibitor Name')
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
),
]);
}
Widget buildCardImage() {
return Container(
height: 100,
width: 100,
child: Image(
image: AssetImage('assets/images/onboarding-2.jpg'),
height: 100,
),
);
}
Widget buildCardIndustry() {
return Padding(
padding: EdgeInsets.only(
left: 40,
right: 40,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
"Industry 1",
style: TextStyle(
fontFamily: "DMSans",
color: Colors.grey,
letterSpacing: 0.3,
fontSize: 12,
),
),
Text(
"Industry 2",
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.3,
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
Widget buildCardGo() {
return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5),
IconButton(
icon: Icon(
MdiIcons.fromString('arrow-right'),
size: 30,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
]);
}
}
I would greatly appreciate any kind of help.
Look:
My own Code
import 'package:flutter/material.dart';
class CardLayout extends StatelessWidget {
Widget buildCardImage = Container(
margin: EdgeInsets.only(right: 10.0),
width: 150,
height: 150,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/250?image=9"),
),
),
);
Widget buildCardExhibitor =
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
child: Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: 10.0,
),
Text(
'Exhibitor Name',
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
]);
Widget buildCardIndustry = Padding(
padding: EdgeInsets.all(8.0),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 1',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
SizedBox(
width: 10.0,
),
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 2',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
],
),
),
);
Widget buildCardGo = Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 3),
IconButton(
icon: Icon(
Icons.arrow_forward_rounded,
size: 30,
color: Colors.blue,
),
onPressed: () {
//Navigator.pop(context);
},
),
]);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Exhibitor'),
actions: [
IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
})
],
),
body: Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width,
//height: 150.0, // remove this line -------------- (1) [EDIT]
child: Column(
// wrap card with column and add listtile as children -------------- (2) [EDIT]
children: [
ListTile(
leading: Text('Exhibitor'),
trailing: IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
}),
),
Card(
elevation: 5.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(5.0),
child: Row(
children: <Widget>[
buildCardImage,
Expanded(
child: Column(
children: <Widget>[
buildCardExhibitor,
buildCardIndustry,
buildCardGo
],
))
],
),
),
),
],
),
),
));
}
}