3
\$\begingroup\$

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.

This is the Grid

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ First of all thank you for your answer, unfortunately i am still left a bit in the dark could you maybe explain this a bit more? I am not sure for example how to loop through the input controller do i still need to create all of them like i did before and then add them to a list to loop through them? Would i have to check with if else statements if it is the first item in the grid and then place a column header else a grid item with an TextInput field and a controller? Or am i thinking in a wrong way? \$\endgroup\$
    – Darjusch
    Jul 21, 2020 at 9:18
  • \$\begingroup\$ @Darjusch Seems like you get a general idea. After creating a data structure that would represent the contents of your screen. You would loop over that structure and use data from your structure instead of literals you currently have in your code. Yes, that involves creating headers, etc.. That doesn't mean you necessarily need to have one loop. Usually dividing code by responsibility makes it easier to understand and maintain. \$\endgroup\$
    – Cezary Butler
    Jul 29, 2020 at 20:05
  • \$\begingroup\$ @CezaryButler, yes exactly. Also the headers, for example, seem to be of a certain kind of grid cell and so making that a separate object, a collection of header cells, will be simple to loop through. And so do the same with the of the kinds of cells in the larger grid. Filling the whole grid becomes a series of simple loops, not one massive complex, all at once data barf. \$\endgroup\$
    – radarbob
    Jul 30, 2020 at 2:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.