Section 2: Flutter’s Simple Navigation

In the previous section, we discussed Flutter’s basic widgets. Let us now handle some simple navigation.

Expectation:

Go ahead and create a new dart file inside the screens folder.

In your screens folder, create a new file and call it intro.dart. Then, use the stl short command to create a stateless widget. Rename the MyWidget to Intro

Remove the two generated imports on line one and 2 and click on StatelessWidget. On the action bulb that pops up on the left, click to import material.dart. Your code should be as follows:

import 'package:flutter/material.dart';
class Intro extends StatelessWidget {
  const Intro({super.key});
@override
  Widget build(BuildContext context) {
    return Container();
  }
}

At the main.dart file, instead of the home leading to MyHomePage class, change that to Intro and import the Intro class

Creating Intro screen UI

Since we are already familiar with creating UI with basic widgets from previous tutorial, we shall dive in to see how the Intro UI looks like.

Code:

import 'package:flutter/material.dart';
class Intro extends StatelessWidget {
  const Intro({super.key});
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            children: [
              //FIRST CONTAINER
              InkWell(
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.22,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        "images/forestbg.jpg",
                      ),
                      fit: BoxFit.cover,
                      colorFilter: ColorFilter.mode(
                          Colors.black.withOpacity(0.5), BlendMode.darken),
                    ),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(
                    child: Text(
                      "Basic Widgets",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

We have wrapped our Container with InkWell widget, so that we can add an onTap property later.

In this design, our Container has a DecorationImage property, with colorFilter to darken it. It also has a borderRadius of 20 to curve the corners. result when running the app:

Adding Navigation

To add navigation, go to the InkWell and add the following property:

onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const MyHomePage()));
                },

Import the MyHomePage class. The Navigator will move to MyHomePage screen when we tap on the design. The full code is as follows:

import 'package:flutter/material.dart';
import 'package:my_first_flutterr/screens/home_page.dart';
class Intro extends StatelessWidget {
  const Intro({super.key});
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            children: [
              //FIRST CONTAINER
              InkWell(
                onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const MyHomePage()));
                },
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.22,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        "images/forestbg.jpg",
                      ),
                      fit: BoxFit.cover,
                      colorFilter: ColorFilter.mode(
                          Colors.black.withOpacity(0.5), BlendMode.darken),
                    ),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(
                    child: Text(
                      "Basic Widgets",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Result:

You can access the video version here:

Or here for Android Studio users