Flutter Dialogs and Alerts

AlertDialog

The AlertDialog widget is used to display a modal dialog with a title, content, and actions.

AlertDialogExample.dart

class AlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AlertDialog Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text("Alert"),
                  content: Text("This is an alert dialog."),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("Cancel"),
                    ),
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("OK"),
                    ),
                  ],
                );
              },
            );
          },
          child: Text("Show AlertDialog"),
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/AlertDialogExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:AlertDialogExample()//add code here
        )
        ),
      );
  }
}

SimpleDialog

The SimpleDialog widget is used to present a list of options.

SimpleDialogExample.dart

import 'package:flutter/material.dart';

class SimpleDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SimpleDialog Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return SimpleDialog(
                  title: Text("Choose an Option"),
                  children: [
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.pop(context, "Option 1");
                      },
                      child: Text("Option 1"),
                    ),
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.pop(context, "Option 2");
                      },
                      child: Text("Option 2"),
                    ),
                  ],
                );
              },
            );
          },
          child: Text("Show SimpleDialog"),
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/SimpleDialogExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:SimpleDialogExample()//add code here
        )
        ),
      );
  }
}

SnackBar

The SnackBar widget displays a short message at the bottom of the screen.

SnackBarExample.dart

import 'package:flutter/material.dart';

class SnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SnackBar Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("This is a SnackBar!"),
                action: SnackBarAction(
                  label: "Undo",
                  onPressed: () {
                    // Handle undo action
                  },
                ),
              ),
            );
          },
          child: Text("Show SnackBar"),
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/SnackBarExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:SnackBarExample()//add code here
        )
        ),
      );
  }
}

BottomSheet

The BottomSheet widget is used to display a modal or persistent sheet from the bottom of the screen.

BottomSheetExample.dart

import 'package:flutter/material.dart';

class BottomSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("BottomSheet Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  height: 200,
                  padding: EdgeInsets.all(16),
                  child: Column(
                    children: [
                      Text("This is a BottomSheet"),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text("Close"),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: Text("Show BottomSheet"),
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/BottomSheetExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:BottomSheetExample()//add code here
        )
        ),
      );
  }
}