I'm new to Flutter and Dart and I need to know how to switch pages by pressing a button. The application detects when I press the button but it does not change the page. I want to know what i did wrong. There is my code. It's basic but i want to understand my error. Thanks

import 'package:flutter/material.dart';

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


class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: const Text(
                    'blabla',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Sous texte',
                  style: TextStyle(
                    color: Colors.green[500],
                  ),
                ),
              ],
            ),
          ),
          /*3*/
          Icon(
            Icons.square_foot,
            color: Colors.yellow[500],
            size: 10,
          ),
          const Text('30°C'),
        ],
      ),
    );
    Column _buildButtonColumn(Color color, IconData icon, String label) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: Colors.blue),
          Container(
            margin: const EdgeInsets.only(top: 8),
            child: Text(label,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: color,
                )),
          )
        ],
      );
    }
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildButtonColumn(color, Icons.dialpad_sharp, 'dialpad sharp'),
        _buildButtonColumn(color, Icons.airplanemode_on_rounded, 'airplane'),
        _buildButtonColumn(color, Icons.assistant_photo_rounded, 'assistant'),
      ],
    );
    Widget textSection = const Padding(
      padding: EdgeInsets.all(32),
      child: Text(
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
        'Alps. Situated 1,578 meters above sea level, it is one of the '
        'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
        'half-hour walk through pastures and pine forest, leads you to the '
        'l = Conake, which warms to 20 degrees Celsius in the summer. Activities '
        'enjoyed here include rowing, and riding the summer toboggan run.',
        softWrap: true,
      ),
    );
    Widget secondSection = Container(
      padding: const EdgeInsets.all(32),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(38),
            child: const Text(
              'texte ea inséré la',
              style: TextStyle(
                color: Colors.lightBlueAccent,
                fontSize: 10,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline,
              ),
            ),
          ),
          Text(
            'hehehehehehe',
            style: TextStyle(
              color: Colors.yellowAccent,
            ),
          ),
        ],
      ),
    );
  Widget button = Container(
    child: ElevatedButton(
      onPressed: () {
        Navigator.pushNamed(context, '/secondPage');
        },
      child: const Text('Launch screen'),
    ),
  );

    return MaterialApp(
      title: 'Flutter layout demo',
      theme:  ThemeData(

        primarySwatch: Colors.grey,
        scaffoldBackgroundColor: Colors.white24,
      ),
      home: Scaffold(
        body: ListView(
          children: [
            titleSection,
            Image.asset(
              'images/lake.jpg',
              width: 600,
              height: 230,
              fit: BoxFit.cover,
            ),
            buttonSection,
            textSection,
            Image.asset(
              'images/lala.jpg',
              width: 200,
              height: 200,
              fit: BoxFit.cover,
            ),
            secondSection,
            button
          ],
        ),
      ),
      initialRoute: '/',
      routes: {
          '/first': (context) => MyHomePage(),
          '/secondPage': (context) => SecondPage(),
        },
    );

  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('secondPage'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

I have a fisrt page who works whith some pictures, and a second page more basic.

CodePudding user response：

You can't be calling the next screen and giving the routes in the same class. No wonder it won't be able to find the route. What you need to do is give these routes in the MyApp class which is at the root of your project like this :

class MyApp extends StatelessWidget {
  String email = '';
  String name = '';

  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/first': (context) => MyHomePage2(),
        '/secondPage': (context) => SecondPage(),
      },
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage());
  }
}

CodePudding user response：

you can use this method for navigating to second screen

Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) => SecondPage()));