AlertDialog with a TextField in Flutter as Well as All type of fields | Flutter Custom Dialog using Widget

In this tutorial, you will learn how to create an AlertDialog with a TextField in Flutter. We will go through all the steps and at the end, you will have a complete code example that displays an alert dialog with a text field.

The basic code to create an AlertDialog widget with a single TextField looks like this.

AlertDialog( title: Text('TextField in Dialog'), content: TextField( onChanged: (value) { }, decoration: InputDecoration(hintText: "Text Field in Dialog"), ), ),

Complete Code Example Now that we have discussed different code snippets separately, let’s put everything into one complete app code example with scroll bar enabled.

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: ApplicationPage(), ); } } class ApplicationPage extends StatefulWidget { const ApplicationPage({Key? key}) : super(key: key); @override _ApplicationPage createState() => _ApplicationPage(); } class _ApplicationPage extends State<ApplicationPage> { @override Widget build(BuildContext context) { return Container( child: new Scaffold( backgroundColor: Colors.white, appBar: AppBar(title: Text("App Bar"),), body: Center( child: Column( children: [ SizedBox(height: 100), OutlinedButton( child: Text("Click here to open dialog"), onPressed: () { openShowDialog(context); } ), ], ), ), ) ); } void openShowDialog(BuildContext context) { showGeneralDialog( context: context, barrierDismissible: true, barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel, barrierColor: Colors.black45, transitionDuration: const Duration(milliseconds: 200), pageBuilder: (BuildContext buildContext, Animation animation, Animation secondaryAnimation) { return Dialog( insetPadding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 50.0), child: Container( child: ListView( shrinkWrap: true, padding: EdgeInsets.all(10), children: [ Column( mainAxisSize: MainAxisSize.min, children: [ TextFormField( decoration: const InputDecoration( labelText: 'Category Name', errorText: '', border: OutlineInputBorder(), suffixIcon: Icon( Icons.text_fields, ), ), ), SizedBox(height: 20), TextFormField( decoration: const InputDecoration( labelText: 'Item Name', errorText: '', border: OutlineInputBorder(), suffixIcon: Icon( Icons.text_fields, ), ), ), SizedBox(height: 20), RaisedButton( onPressed: () { Navigator.of(context).pop(); }, child: Text( "Close", style: TextStyle(color: Colors.white), ), color: const Color(0xFF1BC0C5), ) ], ), ], ), ), ); } ); } }