Building a Dialog Box App with Flutter

In this tutorial, we will walk through the process of building a dialog box app using Flutter. The app will allow users to input text into a dialog box and display the entered text on the main screen.

Prerequisites

Before getting started, make sure you have Flutter installed on your machine. You can follow the official Flutter installation guide for instructions on how to set it up: Flutter Installation Guide

Step 1: Create a new Flutter project

Open your preferred IDE or text editor and create a new Flutter project. You can do this by running the following command in your terminal:

flutter create dialog_box_app

This will create a new Flutter project named "dialog_box_app".

Step 2: Update the dependencies

Open the pubspec.yaml file in your project and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

Save the file and run the following command to fetch the new dependency:

flutter pub get

Step 3: Replace the default code

Replace the default code in the lib/main.dart file with the following code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Building a dialog box app',
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blue,
      ),
      home: const MyHomePage(),
    ));

class MyHomePage extends {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _inputText = '';

  void _showInputDialogBox() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        TextEditingController controller = TextEditingController();
        return AlertDialog(
          title: const Text('Alert Box'),
          alignment: Alignment.center,
          content: TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: 'Input your text here',
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
 setState(() {
                  _inputText = controller.text;
                });
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alert Box Dialog'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(_inputText.isEmpty ? 'Input your new text' : _inputText),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showInputDialogBox,
        child: const Icon(Icons.edit),
      ),
    );
  }
}

Step 4: Run the app

Save the changes and run the app using the following command:

flutter run

The app should launch on the connected device or emulator. You will see an app bar with the title "Alert Box Dialog" and a floating action button with an edit icon.

Step 5: Test the dialog box

Tap on the floating action button to open the dialog box. Enter some text into the input field and tap the "Save" button. The entered text should now be displayed on the main screen.

! You have successfully built a dialog box app using Flutter. You can further customize the app by adding more features and styling to suit your needs.