Question 291967 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – MysterySkulls Form 2 pages

Create a form with 2 pages using Flutter, the first one shows a list of items already registered and the second one is for registration

The first page is to have a text informing about the list and what it contains, below this text is to have the list, on that same page there is to be a button that takes you to the second page where to register.

The second page is to have a test field informing that that page is for registration, a typeable field where you enter what you would like to register, a button to save the registered item and a button to return to the previous page

Tags:

3

Answers


  1. 0

    To start, you put:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  List<String> itemList = [];
    Login or Signup to reply.
  2. 0

    After that you insert this to the first page:

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Page'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'This is a list page. It contains some information.',
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 20),
          // Display the registered items
          Expanded(
            child: ListView.builder(
              itemCount: itemList.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(itemList[index]));
              },
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async {
              final result = await Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondPage()),
              );

              // Update the list with the result from the second page
              if (result != null) {
                setState(() {
                  itemList.add(result);
                });
              }
            },
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.symmetric(vertical: 16, horizontal: 32),
              side: BorderSide(color: Colors.blue),
            ),
            child: Text(
              'Go to Registration Page',
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    Now for the second page you insert this:

    class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Registration Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'This is a registration page. Enter the information below:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your registration'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Add logic to save the registered item
                // For simplicity, we'll just return the entered text
                Navigator.pop(context, _controller.text);
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.white,
                onPrimary: Colors.blue,
                side: BorderSide(color: Colors.blue),
                padding: EdgeInsets.symmetric(vertical: 16, horizontal: 32),
              ),
              child: Text(
                'Save',
                style: TextStyle(fontSize: 18),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search