skip to Main Content

When the screen is resized and LayoutBuilder runs, the value entered is always reset. Even if the same widget variables are used, this differs from Wrap widgets.
So is there any widget that still maintains the entered values? (don’t want to use the controller for each field)

video example.
code example:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Styling Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String aValue = '';
    const aTitle = Text('a field');
    final aField = SizedBox(
      width: 200,
      child: TextFormField(
        initialValue: aValue,
        onChanged: (text) {
          aValue = text;
        },
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Enter your username',
        ),
      ),
    );
    String bValue = '';
    const bTitle = Text('b field');
    final bField = SizedBox(
      width: 200,
      child: TextFormField(
        initialValue: bValue,
        onChanged: (text) {
          bValue = text;
        },
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Enter your username',
        ),
      ),
    );
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return constraints.maxWidth < 200
                  ? Column(
                      children: [
                        aTitle,
                        aField,
                      ],
                    )
                  : Row(
                      children: [
                        aTitle,
                        Flexible(child: aField),
                      ],
                    );
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: Wrap(
            alignment: WrapAlignment.center,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: [
              bTitle,
              bField,
            ],
          ),
        ),
      ],
    );
  }
}

2

Answers


  1. Try giving Value key to TextFormField

    Login or Signup to reply.
  2. Your error is doing this:

    String bValue = '';
    

    and

    child: TextFormField(
        initialValue: bValue,
    

    in your build() method. This will reinitialize bValue to an empty string on each build. You should be prepared for build to be called 60 times per second. If a value needs to persist between builds (which this does), you need to move it out into State. Typically, this is done with a TextEditingController. I believe there are Flutter codelabs on flutter.dev to demonstrate this.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search