Onclick Floating Button Show Alert Dialog Box Using Flutter

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content. A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Onclick Floating Button Show Alert Dialog Box Using Flutter

Onclick Floating Button Show Alert Dialog Box 
Complete Code For Onclick Floating Button Show Alert Dialog Box  In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyHomePage(title: 'Onclick Floting Button Show AlertBox'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Row(
              children:[
                IconButton(icon: Icon(Icons.notifications_none,size: 25,color: Colors.red,),onPressed: () {},),
                Text('  Alert Dialog.',style: TextStyle(color:Colors.red),)
              ]
          ),
          content: Text("Are You Sure Want To Proceed?"),
          actions: <Widget>[
            FlatButton(
              child: Text("CANCEL",style: TextStyle(color:Colors.red),),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Push the FAB to display a dialog.',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        onPressed: _showDialog,
        tooltip: 'Show Dialog',
        child: Icon(Icons.close,),
      ),
    );
  }
}

Related Post