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

In flutter how to set the width of the text field

Creating a desktop app and the width of the text field is too log how to reduce the width of the textfield

enter image description here

  body: Center(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Flexible(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 20),
                child: TextField(
                  controller: _firstNumberController,
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(labelText: 'First Number'),
                ),
              ),
              const SizedBox(height: 20),
              Padding(
                padding: const EdgeInsets.only(left: 20),
                child: TextField(
                  controller: _secondNumberController,
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(labelText: 'Second Number'),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _calculateSum,
                child: const Text('Calculate Sum'),
              ),
              const SizedBox(height: 20),
              Text(
                'Sum: $_sum',
                style: const TextStyle(fontSize: 24),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
Tags:

2

Answers


  1. 0

    To adjust the width, you could use the width field in a SizedBox with the text field as a child.

        const SizedBox(
  width: 100.0,
  child: TextField(
              controller: _secondNumberController,
              keyboardType: TextInputType.number,
              decoration:
                  const InputDecoration(labelText: 'Second Number'),
            ),
)
    Login or Signup to reply.
  2. 0

    Wrap the TextField widget in a Container or SizedBox widget and set the width property of the container or the width property of the SizedBox.

    Example –

    const Container(
  width: 200,
  child: TextField(),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search