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 Step 3: Update main dart file with below code Step 4: Run application
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),
),
),
);
}
}
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(),
);
}
}
|
Article Contributed By :
|
|
|
|
|
15000 Views |
|