Home > other >  Flutter / Dart - how do I change an input box to look the same but only be a result box?
Flutter / Dart - how do I change an input box to look the same but only be a result box?

Time:12-11

I'm new to coding of any sort, so struggling. How do I change an input box to look the same but only be a result box? Also, put the result in 2 places? So I'd like to change where the result is currently showing 66 on my image to only allow a result, not be text input too and how do I transpose that result into the box that currently says Next One and change that to only allow a result, not be text input too? Thank you

enter image description here

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Diabetic insulin dosage';
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
          backgroundColor: Colors.green,
          foregroundColor: Colors.black,
        ),
        body: const AddTwoNumbers(),
        backgroundColor: Colors.white,
      ),
    );
  }
}

class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  Color _fillColor = Colors.white;

  TextEditingController numR1C1controller =
      TextEditingController(); //Changed name of the texteditingcontroller as Row as R and Column as C
  TextEditingController numR1C2controller = TextEditingController();
  TextEditingController numR1C3controller = TextEditingController();
  TextEditingController numR2C1controller = TextEditingController();
  TextEditingController numR2C2controller = TextEditingController();
  TextEditingController numR2C3controller = TextEditingController();
  TextEditingController numR3C1controller = TextEditingController();
  TextEditingController numR3C2controller = TextEditingController();
  TextEditingController numR3C3controller = TextEditingController();
  TextEditingController numR4C1controller = TextEditingController();
  TextEditingController numR4C2controller = TextEditingController();
  TextEditingController numR4C3controller = TextEditingController();

  String result = "0";
  String result2 = "0";
  String result3 = "0";
  String result4 = "0";

  // MAKE LIST OF MAP TO KEEP TRACK OF EACH BUTTONS
  List<Map> buttons = [
    {"name": "BreakFast", "active": false, "value": 1.0},
    {"name": "Lunch", "active": false, "value": 0.6},
    {"name": "Tea", "active": false, "value": 0.55},
  ];

  // YOU CAN SET VARIABLE TO CURRENT MEAL NAME AND CAN CHECK WHETHER IT'S (breakFast) OR NOT
  String? currentMealType;

  // TOGGLE BUTTON FUNCTION
  toggleButtons(Map obj) {
    for (var i in buttons) {
      if (i['name'] == obj['name']) {
        i['active'] = !i['active'];
        numR3C2controller.text = obj['value'].toString();
        _calculateR3();
      } else {
        i['active'] = false;
      }
    }

    setState(() {});
  }

  _calculateR1() {
    if (numR1C1controller.text.isNotEmpty &&
        numR1C2controller.text.isNotEmpty) {
      double sum = double.parse(numR1C1controller.text) -
          double.parse(numR1C2controller.text);
      numR1C3controller.text = sum.toStringAsFixed(1);
      result = sum.toStringAsFixed(1);
    }

    if (numR1C2controller.text.isNotEmpty) {
      setState(() {
        _fillColor = double.parse(numR1C2controller.text) < 5
            ? Colors.red
            : double.parse(numR1C2controller.text) > 9.1
                ? Colors.orange
                : Colors.green;
      });
    } else {
      setState(() {
        _fillColor = Colors.white;
      });
    }
  }

  _calculateR2() {
    if (numR2C1controller.text.isNotEmpty &&
        numR2C2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(numR2C2controller.text) /
            double.parse(numR2C1controller.text);
        numR2C3controller.text = sum.toStringAsFixed(1);
        result2 = sum.toStringAsFixed(1);
      });
    }
  }

  _calculateR3() {
    if (numR3C1controller.text.isNotEmpty &&
        numR3C2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(numR3C1controller.text) *
            double.parse(numR3C2controller.text);
        numR3C3controller.text = sum.toStringAsFixed(1);
        result3 = sum.toStringAsFixed(1);
      });
    }
  }

  _calculateR4() {
    if (numR4C1controller.text.isNotEmpty &&
        numR4C2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(numR4C1controller.text) *
            double.parse(numR4C2controller.text);
        numR4C3controller.text = sum.toStringAsFixed(1);
        result4 = sum.toStringAsFixed(1);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.all(6.0),
            child: Text('Please pick a meal'),
          ),

          // HERE IS THE VIEW FOR BUTTONS
          //******************************

          Row(
            children: buttons
                .map(
                  (btn) => Expanded(
                    child: GestureDetector(
                      onTap: () => toggleButtons(btn),
                      child: Container(
                        padding: const EdgeInsets.all(20.0),
                        margin: const EdgeInsets.only(bottom: 10, right: 10),
                        decoration: BoxDecoration(
                            color: btn['active'] ? Colors.red : Colors.white,
                            border: Border.all(color: Colors.grey[300]!)),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(btn['name'],
                                style: TextStyle(
                                    color: btn['active']
                                        ? Colors.white
                                        : Colors.black)),
                            Text(btn['value'].toString(),
                                style: TextStyle(
                                    color: btn['active']
                                        ? Colors.white
                                        : Colors.black))
                          ],
                        ),
                      ),
                    ),
                  ),
                )
                .toList(),
          ),
          const Padding(
            padding: EdgeInsets.all(6.0),
            child: Text('Input Data'),
          ),

          //******************************

          Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  controller: numR1C1controller,
                  onChanged: (value) => _calculateR1(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,1}'))
                  ],
                  decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      labelText: 'Target Level',
                      hintText: 'Enter First Number',
                      fillColor: _fillColor,
                      filled: false),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR1(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR1C2controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,1}'))
                  ],
                  decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      filled: true,
                      labelText: 'Current Level',
                      hintText: 'Enter Second Number',
                      fillColor: _fillColor),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR1(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR1C3controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Difference',
                    hintText: '',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
            ],
          ),
          const SizedBox(
            height: 8,
          ),
          const Padding(
            padding: EdgeInsets.all(6.0),
            child: Text('Calculations'),
          ),
          Row(
            children: [
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR2(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR2C1controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'One Unit',
                    hintText: 'Enter Third Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR2(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR2C2controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Drop by mmol?',
                    hintText: 'Enter Fourth Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR3(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR2C3controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 2',
                    hintText: '',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
            ],
          ),
          const SizedBox(
            height: 8,
          ),
          Row(
            children: [
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR3(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR3C1controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Meal Carbs',
                    hintText: 'Enter Fifth Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR3(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR3C2controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Meal Ratio',
                    hintText: 'Enter Sixth Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR3(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR3C3controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 3',
                    hintText: '',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR3(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR4C1controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Next One',
                    hintText: 'Enter Seventh Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR4(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR4C2controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Next Two',
                    hintText: 'Enter Eighth Number',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20.0),
                  onChanged: (value) => _calculateR4(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR4C3controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 4',
                    hintText: '',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CodePudding user response:

To only show result in TextField and can't edit it you can set enabled to false and also change disabledBorder, like this:

TextField(
      textAlign: TextAlign.center,
      style: const TextStyle(fontSize: 20.0),
      onChanged: (value) => _calculateR2(),
      keyboardType:
          const TextInputType.numberWithOptions(decimal: true),
      controller: numR2C2controller,
      inputFormatters: <TextInputFormatter>[
        FilteringTextInputFormatter.allow(
            RegExp(r'^(\d )?\.?\d{0,2}'))
      ],
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Drop by mmol?',
        hintText: 'Enter Fourth Number',
        enabled: false, //<--- add this
        labelStyle: TextStyle(color: Colors.black),//<--- add this
        disabledBorder: OutlineInputBorder(
              borderSide: BorderSide(width: 0.5, color: Colors.black)),//<--- add this
      ),
      
    )

for your next issue you can pass your result to next TextField's controller when ever current textfield get ready, I think it gets its value in _calculateR3, do this:

_calculateR3() {
    if (numR3C1controller.text.isNotEmpty &&
        numR3C2controller.text.isNotEmpty) {
      setState(() {
        double sum = double.parse(numR3C1controller.text) *
            double.parse(numR3C2controller.text);
        numR3C3controller.text = sum.toStringAsFixed(1);
        numR4C1controller.text = numR3C3controller.text; // <--- add this
        result3 = sum.toStringAsFixed(1);
      });
    }
  }
  • Related