Home > Software engineering >  Flutter / Dart - making text input boxes small in height, alternatives to using isDense: true,
Flutter / Dart - making text input boxes small in height, alternatives to using isDense: true,

Time:12-15

Flutter / Dart - I have a number of text input boxes on my app, but I still need more rows but haven't got the room, so need to make each one smaller. I have found the command "isDense: true," works to reduce the size slightly, but I need to reduce them much more, what's my best option? The labelText and hintText still need to show in each box.

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'];
        numR2C2controller.text = obj['value'].toString();
        _calculateR2();
      } else {
        i['active'] = false;
      }
    }

    setState(() {});
  }

  _calculateR1() {
    if (numR1C1controller.text.isNotEmpty &&
        numR1C2controller.text.isNotEmpty) {
      double sum = double.parse(numR1C1controller.text) -
          double.parse(numR1C2controller.text);
      numR4C2controller.text = numR1C2controller.text;
      numR2C1controller.text = numR1C1controller.text; // <-- add this
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _calculateR3();
        _calculateR2();
      });
      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);
        numR3C1controller.text = numR2C3controller.text;
        WidgetsBinding.instance.addPostFrameCallback((_) {
          _calculateR3();
        });
        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);
        numR4C1controller.text = numR3C3controller.text;
        WidgetsBinding.instance.addPostFrameCallback((_) {
          _calculateR3();
          _calculateR4();
        });
        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: 14.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: 'Carbs in Meal',
                      isDense: true,
                      hintText: 'Enter First Number',
                      fillColor: _fillColor,
                      filled: false),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 14.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 B/G Level',
                      isDense: true,
                      hintText: 'Enter Second Number',
                      fillColor: _fillColor),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: TextField(
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 14.0),
                  onChanged: (value) => _calculateR1(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR1C3controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Excercise Factor',
                    isDense: true,
                    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, height: 1.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: 'T Carbs in meal',
                    isDense: true,
                    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: 'T Meal Ratio',
                    isDense: true,
                    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.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 2',
                    isDense: true,
                    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: 'T Result 2',
                    // isDense: true,
                    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: 'Correction Factor',
                    // isDense: true,
                    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.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 3',
                    // isDense: true,
                    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) => _calculateR4(),
                  keyboardType:
                      const TextInputType.numberWithOptions(decimal: true),
                  controller: numR4C1controller,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'T Target Level',
                    // isDense: true,
                    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: 'T Current B/G Level',
                    // isDense: true,
                    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.allow(
                        RegExp(r'^(\d )?\.?\d{0,2}'))
                  ],
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Result 4',
                    // isDense: true,
                    hintText: '',
                  ),
                ),
              ),
              const SizedBox(
                width: 8,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CodePudding user response:

Simply wrap your your widget with sizedbox for height and width & for inner padding use content padding

SizedBox(
  height: 10,  // Increase the size as per your requirement 
  width: 10,
  child: TextField(
decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10),  // Increase this for inner padding
  ),
)

CodePudding user response:

Set contentPadding to zero in the decoration of TextField i.e.

decoration: InputDecoration(
  contentPadding: EdgeInsets.zero,
),

CodePudding user response:

If you want to make it even smaller, you can wrap it in SizedBox and give it some height (and width).

SizedBox(
  height: 50,
  width: 50,
  child: TextField(),
)
  • Related