如何在提交时将文本字段更改为另一个小部件？

Question

I have a Textfield and after the input I want to convert the Textfield widget into a simple Textwidget (eg input your name => displays your name).

I tried doing this with a conditional statement in this code below (it's just a quick sample code to display the problem, didn't want to post my whole code):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController hello1 = TextEditingController();

  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            hello1.text == ''
                ? TextField(
                    controller: hello1, onSubmitted: (_) => print(hello1.text))
                : Text(hello1.text),
            RaisedButton(onPressed: () {
              setState(() {
                counter++;
              });
            })
          ],
        ),
      ),
    );
  }
}

So when I enter the text into the Textfield and submit it, the widget will not convert into a text widget. Unless I rerender something else on the screen, that's why I added the RaisedButton and the counter variable.

So what can I do to convert it immediately into a text widget. Feel free to point me to some fundamental logic I might be missing here, thank you!

Answer 1

It's because you don't call the setState() method.

Changing the value of the TextEditingController won't rebuild your widget. SetState() method does.

children: <Widget>[
        hello1.text == ''
            ? TextField(
                controller: hello1,
                onSubmitted: (_) {
                  print(hello1.text);
                  setState(() {});
                },
              )
            : Text(hello1.text),
        RaisedButton(
          onPressed: () {
            setState(() {});
          },
        )
      ],