I have a input grid with more than 40 input-fields hardcoded
Code Review Asked by Darjusch on October 27, 2021
I am new to flutter and i managed to build a working Grid which does what i want it to do but the code is a duplicated hell and i didn’t manage to create it dynamically while still keeping track of the input-fields and its input.
I really could use some help!
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../widgets/app_bar_row.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
class StockInputScreen extends StatefulWidget {
final String standName;
StockInputScreen({@required this.standName});
@override
_StockInputScreenState createState() =>
_StockInputScreenState(standName: this.standName);
}
class _StockInputScreenState extends State<StockInputScreen> {
List<String> gridItems = [];
final String standName;
_StockInputScreenState({this.standName});
Map<String, dynamic> gridData = {};
String currentDate = DateFormat('yMEd').format(DateTime.now());
File _pickedImage;
Future<void> pickImage() async {
final picker = ImagePicker();
final pickedImage = await picker.getImage(source: ImageSource.gallery);
final pickedImageFile = File(pickedImage.path);
setState(() {
_pickedImage = pickedImageFile;
});
}
void fillGridWithData() {
print(standName);
currentDate = currentDate.replaceAll('/', '.');
setState(() {
gridData = {
standName: {
'erdbeeren': {
'erdbeerenAB': erdbeerenABController.text,
'erdbeeren13Uhr': erdbeeren13UhrController.text,
'erdbeeren15Uhr': erdbeeren15UhrController.text,
'erdbeeren17Uhr': erdbeeren17UhrController.text,
'erdbeerenEB': erdbeerenEBController.text,
},
'erdbeerenGestern': {
'erdbeerenGesternAB': erdbeerenGesternABController.text,
'erdbeerenGestern13Uhr': erdbeerenGestern13UhrController.text,
'erdbeerenGestern15Uhr': erdbeerenGestern15UhrController.text,
'erdbeerenGestern17Uhr': erdbeerenGestern17UhrController.text,
'erdbeerenGesternEB': erdbeerenGesternEBController.text,
},
'spargelVio': {
'spargelVioAB': spargelVioABController.text,
'spargelVio13Uhr': spargelVio13UhrController.text,
'spargelVio15Uhr': spargelVio15UhrController.text,
'spargelVio17Uhr': spargelVio17UhrController.text,
'spargelVioEB': spargelVioEBController.text,
},
'spargelVioGestern': {
'spargelVioABGestern': spargelVioGesternABController.text,
'spargelVio13UhrGestern': spargelVioGestern13UhrController.text,
'spargelVio15UhrGestern': spargelVioGestern15UhrController.text,
'spargelVio17UhrGestern': spargelVioGestern17UhrController.text,
'spargelVioEBGestern': spargelVioGesternEBController.text,
},
'spargelWeiss': {
'spargelWeissAB': spargelWeissABController.text,
'spargelWeiss13Uhr': spargelWeiss13UhrController.text,
'spargelWeiss15Uhr': spargelWeiss15UhrController.text,
'spargelWeiss17Uhr': spargelWeiss17UhrController.text,
'spargelWeissEB': spargelWeissEBController.text,
},
'spargelWeissGestern': {
'spargelWeissGesternAB': spargelWeissGesternABController.text,
'spargelWeissGestern13Uhr': spargelWeissGestern13UhrController.text,
'spargelWeissGestern15Uhr': spargelWeissGestern15UhrController.text,
'spargelWeissGestern17Uhr': spargelWeissGestern17UhrController.text,
'spargelWeissGesternEB': spargelWeissGesternEBController.text,
},
'kirsche690': {
'kirsche690AB': kirsche690ABController.text,
'kirsche69013Uhr': kirsche69013UhrController.text,
'kirsche69015Uhr': kirsche69015UhrController.text,
'kirsche69017Uhr': kirsche69017UhrController.text,
'kirsche690EB': kirsche690EBController.text,
},
'kirsche790': {
'kirsche790AB': kirsche790ABController.text,
'kirsche79013Uhr': kirsche79013UhrController.text,
'kirsche79015Uhr': kirsche79015UhrController.text,
'kirsche79017Uhr': kirsche79017UhrController.text,
'kirsche790EB': kirsche790EBController.text,
},
'kirsche890': {
'kirsche890AB': kirsche890ABController.text,
'kirsche89013Uhr': kirsche89013UhrController.text,
'kirsche89015Uhr': kirsche89015UhrController.text,
'kirsche89017Uhr': kirsche89017UhrController.text,
'kirsche890EB': kirsche890EBController.text,
},
'kirsche1090': {
'kirsche1090AB': kirsche1090ABController.text,
'kirsche109013Uhr': kirsche109013UhrController.text,
'kirsche109015Uhr': kirsche109015UhrController.text,
'kirsche109017Uhr': kirsche109017UhrController.text,
'kirsche1090EB': kirsche1090EBController.text,
},
}
};
});
addDataToFirestore();
}
void addDataToFirestore() {
Firestore.instance.collection('Stände/Testing/' + currentDate).document(standName).setData(gridData);
}
var erdbeerenABController = TextEditingController();
var erdbeeren13UhrController = TextEditingController();
var erdbeeren15UhrController = TextEditingController();
var erdbeeren17UhrController = TextEditingController();
var erdbeerenEBController = TextEditingController();
var erdbeerenGesternABController = TextEditingController();
var erdbeerenGestern13UhrController = TextEditingController();
var erdbeerenGestern15UhrController = TextEditingController();
var erdbeerenGestern17UhrController = TextEditingController();
var erdbeerenGesternEBController = TextEditingController();
var spargelVioABController = TextEditingController();
var spargelVio13UhrController = TextEditingController();
var spargelVio15UhrController = TextEditingController();
var spargelVio17UhrController = TextEditingController();
var spargelVioEBController = TextEditingController();
var spargelVioGesternABController = TextEditingController();
var spargelVioGestern13UhrController = TextEditingController();
var spargelVioGestern15UhrController = TextEditingController();
var spargelVioGestern17UhrController = TextEditingController();
var spargelVioGesternEBController = TextEditingController();
var spargelWeissABController = TextEditingController();
var spargelWeiss13UhrController = TextEditingController();
var spargelWeiss15UhrController = TextEditingController();
var spargelWeiss17UhrController = TextEditingController();
var spargelWeissEBController = TextEditingController();
var spargelWeissGesternABController = TextEditingController();
var spargelWeissGestern13UhrController = TextEditingController();
var spargelWeissGestern15UhrController = TextEditingController();
var spargelWeissGestern17UhrController = TextEditingController();
var spargelWeissGesternEBController = TextEditingController();
var kirsche690ABController = TextEditingController();
var kirsche69013UhrController = TextEditingController();
var kirsche69015UhrController = TextEditingController();
var kirsche69017UhrController = TextEditingController();
var kirsche690EBController = TextEditingController();
var kirsche790ABController = TextEditingController();
var kirsche79013UhrController = TextEditingController();
var kirsche79015UhrController = TextEditingController();
var kirsche79017UhrController = TextEditingController();
var kirsche790EBController = TextEditingController();
var kirsche890ABController = TextEditingController();
var kirsche89013UhrController = TextEditingController();
var kirsche89015UhrController = TextEditingController();
var kirsche89017UhrController = TextEditingController();
var kirsche890EBController = TextEditingController();
var kirsche1090ABController = TextEditingController();
var kirsche109013UhrController = TextEditingController();
var kirsche109015UhrController = TextEditingController();
var kirsche109017UhrController = TextEditingController();
var kirsche1090EBController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: AppBarRow(),
),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
widget.standName,
style: TextStyle(fontSize: 33, fontWeight: FontWeight.bold),
),
],
),
Container(
height: 400,
padding: EdgeInsets.only(bottom: 30),
child: GridView.count(
padding: const EdgeInsets.all(10),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 6,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('AB'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('13 Uhr'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('15 Uhr'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('17 Uhr'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('EB'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Erd'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeeren13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeeren15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeeren17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Erd G'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenGesternABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenGestern13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenGestern15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenGestern17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: erdbeerenGesternEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('S Vio'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVioABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVio13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVio15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVio17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVioEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('S Vio G'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVioGesternABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelVioGestern13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelVioGestern15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelVioGestern17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelVioGesternEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('SW'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeissABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeiss13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeiss15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeiss17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeissEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('SW G'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeissGesternABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelWeissGestern13UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelWeissGestern15UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child:
TextField(controller: spargelWeissGestern17UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: spargelWeissGesternEBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('K 6,90'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche690ABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche69013UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche69015UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche69017UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche690EBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('K 7,90'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche790ABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche79013UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche79015UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche79017UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche790EBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('K 8,90'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche890ABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche89013UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche89015UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche89017UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche890EBController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('K 10,90'),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche1090ABController),
color: Colors.blue[200],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche109013UhrController),
color: Colors.blue[300],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche109015UhrController),
color: Colors.blue[400],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche109017UhrController),
color: Colors.blue[500],
),
Container(
padding: const EdgeInsets.all(8),
child: TextField(controller: kirsche1090EBController),
color: Colors.blue[500],
),
],
),
),
Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 40),
child: FlatButton(
color: Colors.blue,
textColor: Colors.white,
padding: EdgeInsets.all(8.0),
onPressed: () => {
pickImage(),
},
child: Text(
'Foto Upload',
style: TextStyle(fontSize: 18),
),
),
),
Spacer(),
CircleAvatar(
radius: 50,
backgroundColor: Colors.white,
backgroundImage:
_pickedImage != null ? FileImage(_pickedImage) : null,
),
Container(
padding: EdgeInsets.only(right: 40),
child: FlatButton(
color: Colors.blue,
textColor: Colors.white,
padding: EdgeInsets.all(8.0),
onPressed: () => {
fillGridWithData(),
},
child: Text(
'Save Data',
style: TextStyle(fontSize: 18),
),
),
),
],
)
],
),
);
}
}
This is the grid maybe its helps to see it.
One Answer
Make a data structure, an object, to hold all the data and meta data. The goal is to replace all that disconnected literal object creation with looping through the data structure.
My sense is the structure is a composite of "row header", "column header", "grid data" objects. Put all of your meta data there, including properties to hold heading text, controller references and Container properties; and maybe a spot to put a reference to the associated UI grid-square if needed. So "Row Header" is an array of "top-row-grid-square" objects, in order left to right.
Then I see other objects that map the data to the actual UI grid. But it's all general looping through the data structure because the structure is organized to map to the UI.
Answered by radarbob on October 27, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- Jon Church on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?