HOW TO ADD TEXTFIELD IN ALERT DIALOG IN FLUTTER

In this post we are going to learn how add Textfiled in Alert Dialog with flutter

Let's Start

Step 1: Create Flutter Application

Step 2: Create TextFieldAlertDialog dart file and add below code

import 'package:flutter/material.dart';

class TextFieldAlertDialog extends StatelessWidget {
  TextEditingController _textFieldController = TextEditingController();

  _displayDialog(BuildContext context) async {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('What is your Lucky Number'),
            content: TextField(
              controller: _textFieldController,
              textInputAction: TextInputAction.go,
              keyboardType: TextInputType.numberWithOptions(),
              decoration: InputDecoration(hintText: "Enter your number"),
            ),
            actions: <Widget>[
              new FlatButton(
                child: new Text('Submit'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              )
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alert Dilaog with TestFiled'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Write your Number',style: TextStyle(color: Colors.white),),
          color: Colors.pink,
          onPressed: () => _displayDialog(context),
        ),
      ),
    );
  }
}

Step 3: Update main dart file with below code

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: TextFieldAlertDialog(),
    );
  }

}

Step 4: Run application