Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Why does 'TextField' break this class and freeze the program?

I’m having trouble understanding why adding a TextField causes this class to break and freeze the program. When I remove it, the Unit class works perfectly. Can anyone help me figure out what’s going wrong?

I have attempted to use the class in various areas of my code with minimal surrounding effects. Additionally, I have searched for similar issues on Google and thoroughly reviewed the Flutter documentation.

Thank you in advance!

import 'package:flutter/material.dart';

class Unit extends StatefulWidget {
  const Unit({super.key, required this.unitID});

  final String unitID;

  @override
  State<Unit> createState() => _UnitState();
}

class _UnitState extends State<Unit> {
  bool _active = false;

  // ignore: unused_element
  void _handleUpdate() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    double unitWidth = MediaQuery.of(context).size.width;
    double unitHeight = MediaQuery.of(context).size.height;

    final String unitID = widget.unitID;

    return Container(
      height: unitHeight * 0.2,
      width: unitWidth * 0.7,
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: const Color.fromARGB(255, 72, 72, 72)),
          color: const Color.fromARGB(255, 110, 110, 110)),
      padding: const EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          const Text('Unit name'),
          // ignore: unnecessary_string_interpolations
          Text('$unitID'),
          const TextField(
            decoration: InputDecoration(
                border: OutlineInputBorder(), labelText: 'Name'),
          ),
        ],
      ),
    );
  }
}

TextField in code

No TextField in code

Tags:

2

Answers


  1. 0

    in your declaration for unitHeight, you assigned it a mediaQuery width instead, kindly modify it to:

    double unitHeight = MediaQuery.of(context).size.height;

    complete code:

    import ‘package:flutter/material.dart’;

    class Unit extends StatefulWidget {
  const Unit({super.key, required this.unitID});

  final String unitID;

  @override
  State<Unit> createState() => _UnitState();
}

class _UnitState extends State<Unit> {
  bool _active = false;

  // ignore: unused_element
  void _handleUpdate() {
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    double unitWidth = MediaQuery.of(context).size.width;
    /// modify
    double unitHeight = MediaQuery.of(context).size.height;

    final String unitID = widget.unitID;

    return Container(
      height: unitHeight * 0.2,
      width: unitWidth * 0.7,
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: const Color.fromARGB(255, 72, 72, 72)),
          color: const Color.fromARGB(255, 110, 110, 110)),
      padding: const EdgeInsets.all(10),
      child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
        Text('ID:$unitID'),
        const TextField(
          decoration:
              InputDecoration(border: OutlineInputBorder(), labelText: 'Name'),
        ),
      ]),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Try to put TextField in Expanded like this

    Expanded(child: TextFormField()),

    As far as I understand, the UI can’t figure out what the width of the widget should be and stops.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search