Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

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


 

What is an Alert Dialog?

Alert Dialog is a PopupBox will use to show small messages on Current widdow. This Alert Box can be of Warning/Info/Network alerts...

 

Read about Alert Dialog with Close Button Flutter


Read about Add Listview inside Dialog Box in 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

TextFiled inside AlertDialog - Flutter

 

TextFiled inside AlertDialog - Flutter


7969 Views

Author: RRTutors

Flutter Questions

Android Questions