How to Alert Demo with Text Field in Flutter?

Hi friends,

Today our leading topic is How to Alert Demo with Text Field in Flutter?. Here you will learn AlertDialog with a TextField in Flutter. This article goes in detailed on how to add textfield in alert dialog in flutter. you will learn simple example AlertDialog with a TextField in Flutter.

In this tutorial, you will learn Flutter AlertDialog example. I would like to show you Flutter Alert Dialog to Custom Dialog. you will learn flutter dart alertdialog with input Code Example. This article will give you simple example of How to make an AlertDialog in Flutter?.

I will give you simple Example of how to add textfield in alert dialog in flutter.

So let's see bellow example:

Step 1 : Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

$flutter create flutter_alert_demo_example

Navigate to the project directory:

$cd flutter_alert_demo_example

Step 2 : Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                title: 'Flutter Alert Demo',
                debugShowCheckedModeBanner: false,
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                ),    
                //home: MyHomePage(title: 'Flutter Demo Home Page'),
                home: AlertDialogTextField(),
            );
        }
    }
    class AlertDialogTextField extends StatelessWidget {
        TextEditingController _textFieldController = TextEditingController();

        _displayDialog(BuildContext context) async {
            return showDialog(
                context: context,
                builder: (context) {
                    return AlertDialog(
                        title: Text('AlertDemo with TextField '),
                        content: TextField(
                            controller: _textFieldController,
                            decoration: InputDecoration(hintText: "Enter Text"),
                        ),
                        actions: [
                            new FlatButton(
                                child: new Text('SUBMIT'),
                                onPressed: () {
                                    Navigator.of(context).pop();
                                },
                            )
                        ],
                    );
                }
            );
        }

        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Alert Dialog Demo'),
                ),
                body: Center(
                    child: FlatButton(
                        child: Text(
                            'Show Alert',
                            style: TextStyle(fontSize:  20.0 ),),
                            padding: EdgeInsets.fromLTRB(20.0,12.0,20.0,12.0),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8.0)
                            ),
                            color: Colors.blue,
                            onPressed: () => _displayDialog(context),
                        ),
                    ),
                );
            }
        }

Step 3 : Run this Debug App

Output

I hope it will help you....