Resolved: Flutter - onPressed - change page

Question:

I have a problem with changing page with Flutter. I created two .dart Files and I want to switch from page 1 to page 2 by a button. Can someone help me please?

Container(
            margin: const EdgeInsets.fromLTRB(30, 7, 30, 7),
            child: ElevatedButton.icon(
              style: ElevatedButton.styleFrom(
                shadowColor: Colors.black,
                fixedSize: const Size(300, 50),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                primary: Colors.teal[700],
                onPrimary: Colors.white,
                textStyle: const TextStyle(
                  fontSize: 25,
                  fontStyle: FontStyle.normal,
                ),
              ),
              label: const Text('Kontakt'),
              icon: const Icon(Icons.person),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const Kontakt()),
                );
              },
              onLongPress: () {},
            ),
          ),

On the Second page I wrote this:

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

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
        backgroundColor: Colors.teal,
        body: ListView(
          children: <Widget>[
            Center(
              child: ListView(
                children: [
                  Container(
                      margin: const EdgeInsets.fromLTRB(20, 27, 20, 20),
                      child: const Image(
                        image: AssetImage('assets/ENLogo.png'),
                        width: 200,
                        height: 200,
                        fit: BoxFit.contain,
                      )),
                  Container(
                    margin: const EdgeInsets.fromLTRB(30, 7, 30, 7),
                    child: ElevatedButton.icon(
                      style: ElevatedButton.styleFrom(
                        shadowColor: Colors.black,
                        fixedSize: const Size(300, 50),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        primary: Colors.teal[700],
                        onPrimary: Colors.white,
                        textStyle: const TextStyle(
                          fontSize: 25,
                          fontStyle: FontStyle.normal,
                        ),
                      ),
                      label: const Text('E-Mail'),
                      icon: const Icon(Icons.mail),
                      onPressed: () {
                      },
                      onLongPress: () {
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        )),
  );
}}

What have I to change, so that i can navigate through my files? In Android Studio I can’t find any ERROR Message or anything like that.
I thank you in advance for your support.

Answer:

So you need to remove the MaterialApp() widget in on the second page: ->First Page

import 'package:debounce/kontakt.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Container(
                margin: const EdgeInsets.fromLTRB(30, 7, 30, 7),
                child: ElevatedButton.icon(
                  style: ElevatedButton.styleFrom(
                    shadowColor: Colors.black,
                    fixedSize: const Size(300, 50),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    primary: Colors.teal[700],
                    onPrimary: Colors.white,
                    textStyle: const TextStyle(
                      fontSize: 25,
                      fontStyle: FontStyle.normal,
                    ),
                  ),
                  label: const Text('Kontakt'),
                  icon: const Icon(Icons.person),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const Kontakt()),
                    );
                  },
                  onLongPress: () {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }


}

->Second Page

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.teal,
        body: ListView(
          children: <Widget>[
            Center(
              child: ListView(
                children: [
                  Container(
                      margin: const EdgeInsets.fromLTRB(20, 27, 20, 20),
                      child: const Image(
                        image: AssetImage('assets/ENLogo.png'),
                        width: 200,
                        height: 200,
                        fit: BoxFit.contain,
                      )),
                  Container(
                    margin: const EdgeInsets.fromLTRB(30, 7, 30, 7),
                    child: ElevatedButton.icon(
                      style: ElevatedButton.styleFrom(
                        shadowColor: Colors.black,
                        fixedSize: const Size(300, 50),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        primary: Colors.teal[700],
                        onPrimary: Colors.white,
                        textStyle: const TextStyle(
                          fontSize: 25,
                          fontStyle: FontStyle.normal,
                        ),
                      ),
                      label: const Text('E-Mail'),
                      icon: const Icon(Icons.mail),
                      onPressed: () {
                      },
                      onLongPress: () {
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

Just reference your first page in your main class

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home:  HomeScreen(), //Reference your new page here
    );
  }
}

Check the images below

If you have better answer, please add a comment about this, thank you!

Resolved: Flutter – onPressed – change page

Resolved: How can I modify formData before sending it?

Resolved: How to efficient create SimpleITK image?

Resolved: How can I write CSS selector(s) that apply to table rows for all td elements on that row after a td with a certain class?

Leave A Reply