CODEWITHSUNDEEP
flutter
quinzo
quinzo

Reputation: 689

Flutter display value of Textfield in a Text Widget by typing

I'm new to Flutter and curious how I can display the value of TextField in a Text widget without pressing a button. To be clearer with my question: When I type "hello" in the TextField, the text should also be "hello".

Upvotes: 0

Views: 3483

Answers (2)

Tuan
Tuan

Reputation: 2433

You need to listen change from TextField and update it in a global variable that can access from another widget (Text)

Example:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: App()));

class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}

class AppState extends State<App> {
  String text = ''; // variable stored your text

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            onChanged: (value) => setState(() => text = value), // change `text` every text input change
            decoration: const InputDecoration(labelText: 'input your text'),
          ),
          Text('your text: $text'), // display your text
        ],
      ),
    );
  }
}

enter image description here

Upvotes: 4

MickaelHrndz
MickaelHrndz

Reputation: 3842

The Flutter documentation has become pretty solid. The essential widgets like TextField have detailed explanations on their proper usage with code example/demo, and even videos. Just type "flutter [the widget name]" in Google.

Upvotes: 1

Related Questions