Building a TextField Input App using Flutter

In this tutorial, we will walk you through the process of building a simple app with a TextField input using the Flutter framework. Flutter is a popular open-source UI development kit created by Google, which allows developers to build beautiful and fast native apps for iOS, Android, web, and desktop platforms, all from a single codebase.

Prerequisites

Before we begin, make sure you have Flutter installed on your system. You can find detailed installation instructions in the official Flutter documentation: Flutter Installation

Getting Started

To get started, create a new Flutter project and navigate to the project directory in your terminal or command prompt. Once you're inside the project directory, open the main.dart file and replace its content with the following code:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
  home: MyApp(),
));

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

  @override
  Widget build(BuildContext context) => const MyHomePage();
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _inputText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField Input'),
      ),
      body: Center(
        child: TextField(
          decoration: const InputDecoration(
            hintText: 'Input your text here',
          ),
          onChanged: (value) {
            setState(() {
              _inputText = value;
            });
          },
        ),
      ),
      bottomSheet: Container(
        alignment: Alignment.center,
        height: 50,
        child: Text(_inputText),
      ),
    );
  }
}

Code Explanation

Let's go through the code to understand how it works.

Importing Dependencies

We start by importing the required dependencies. In this case, we're using the material.dart package from Flutter, which provides pre-designed widgets following the Material Design guidelines.

import 'package:flutter/material.dart';

Defining the App Entry Point

The main() function is the entry point of our app. Here, we use a MaterialApp widget as the root of our app, specifying MyApp as the home screen.

void main() => runApp(const MaterialApp(
  home: MyApp(),
));

Creating the MyApp Widget

We define a stateless widget called MyApp. This widget represents the overall structure of our app. It doesn't have any mutable state but serves as the container for our home page widget.

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

  @override
  Widget build(BuildContext context) => const MyHomePage();
}

Creating the MyHomePage Widget

The MyHomePage widget is a stateful widget that represents the main content of our app. It extends StatefulWidget and returns an instance of _MyHomePageState, which manages the mutable state.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Managing State with _MyHomePageState

The _MyHomePageState class is the state associated with the MyHomePage widget. It extends State<MyHomePage> and contains mutable state variables.

In this example, we have a _inputText variable of type String to store the text entered in the TextField. Whenever the text changes, we update the state using the setState() method provided by Flutter.

class _MyHomePageState extends State<MyHomePage> {
  String _inputText = '';

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Building the UI with Scaffold and TextField

Inside the build() method of _MyHomePageState, we return a Scaffold widget. The Scaffold provides a basic layout structure for our app, including an AppBar and a body area.

In the body section, we have a Center widget that contains a TextField. The TextField widget is where the user can input text. We provide it with a hint text using InputDecoration to guide the user.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('TextField Input'),
    ),
    body: Center(
      child: TextField(
        decoration: const InputDecoration(
          hintText: 'Input your text