How to Switch screens in flutter?

Visual studio code is a great editor to create mobile apps in Flutter. It is user friendly and flutter is easy to install using its extensions available in visual studio code. Moreover, this blog will help you to further improve your design. I will teach you on how to create multiple screens in flutter.

  • The first thing is you are going to need a button in order to transfer to other screens. Copy the code on the body of your code.
alignment: Alignment.center,
            child: ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const OtherScreen()));
                // Respond to button press
              },
              child: const Text('to the other screen'),
              style: ElevatedButton.styleFrom(
                  fixedSize: const Size(200, 60),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15))),
  • Create a .dart file and name it to your desired screen name (OtherScreen).
class OtherScreen extends StatelessWidget {
  const OtherScreen ({Key? key}) : super(key: key);
  • In the main or your first sreen import the file of your second screen.
import 'otherscreen.dart';

After running the code and clicking on the button that you made. You will be able to transfer screens and if you desired more screen just repeat the process and you will be able to create more screens.

Leave a Comment

Your email address will not be published. Required fields are marked *