Android Studio - Flutter - onPressed - change page

Enea
June 16, 2022
269 views
1 vote
2 Answers

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.

Answers

Chosen as BEST ANSWER

thank you for your quick reply. I took the corrected code from you. Unfortunately it still doesn't work, in the terminal I get confirmation that it works, but in the emulator I also stay on the first page.

Do you see any other mistake?

I'll send the whole code of the first page:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          leading: const Icon(Icons.home),
          title: const Center(
              child: Text(
            'Utile Dulci',
            style:
                TextStyle(color: Colors.white, fontSize: 30, shadows: <Shadow>[
              Shadow(offset: Offset(0, 0), blurRadius: 30, color: Colors.black),
            ]),
          )),
          backgroundColor: Colors.teal[700],
          actions: [
            Container(
              width: 10,
            ),
            const Icon(Icons.favorite),
            Container(
              width: 20,
            ),
          ],
        ),
        body: 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('Rezepte'),
                  icon: const Icon(Icons.restaurant_menu),
                  onPressed: () {},
                  onLongPress: () {},
                ),
              ),
              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('Workout'),
                  icon: const Icon(Icons.fitness_center),
                  onPressed: () {},
                  onLongPress: () {},
                ),
              ),
              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('Werkzeuge'),
                  icon: const Icon(Icons.handyman),
                  onPressed: () {},
                  onLongPress: () {},
                ),
              ),
              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: () {},
                ),
              ),
              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('App-Info'),
                  icon: const Icon(Icons.info),
                  onPressed: () {},
                  onLongPress: () {},
                ),
              ),
              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('Weitere Apps'),
                  icon: const Icon(Icons.download),
                  onPressed: () {},
                  onLongPress: () {},
                ),
              ),
            ],
          ),
        ),
        backgroundColor: Colors.teal[800],
      ),
    );
  }
}

"NEW" 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: () {
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

(Edit)

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

Please signup or login to give your own answer.

Click here to cancel reply.

Android Studio – Flutter – onPressed – change page

Answers