How to create a Multi-page app in Flutter

Question

This is a demo app from https://docs.flutter.dev/cookbook/design/drawer where it shows an item of a list in the body of the new pages.

import 'package:flutter/material.dart';

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

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

  static const appTitle = 'My Drawer App';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

... ... ... (more in https://docs.flutter.dev/cookbook/design/drawer)

I want to be able to show text input fields and command button and process user input in each new pages. Can someone help?

Answer 1

You need to learn more about Flutter Navigations. Start from here with basic navigations : Navigate to a new screen and back

Once you become more experienced, I suggest learning and using the Auto Router Package for Navigations.

Here, I'll show you how to achieve your requirement. But answers to these kinds of questions can be easily found on the internet.

First, you need to create a new screen:

 class SecondScreen extends StatelessWidget {
  SecondScreen({super.key});

  // Add TextEditingController for the text input field
  final TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Add a text input field
            TextField(
              controller: _textFieldController,
              decoration: const InputDecoration(labelText: 'Enter text'),
            ),
            const SizedBox(height: 16.0),
            // Add a command button
            ElevatedButton(
              onPressed: () {
                // Process user input, for example, print the entered text
                print(_textFieldController.text);
              },
              child: const Text('Process Input'),
            ),
          ],
        ),
      ),
    );
  }
}

And then you can navigate to that screen using Navigator.push():

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SecondScreen()),
  );
}

To return to the previous screen, you can use Navigator.pop():

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}