In Flutter navigation without context between two screens is very easy with the help of Getx package. For more info about Get Package, click here to read our article.

In this blog, you will learn how to navigate one screen to another screen without context. So Let’s get started.

In the old method we use Navigator. Now we don’t need any lengthy code.

Flutter Navigation without Context

Navigate to a new screen:

Get.to(NextScreen());

To close snackbars, dialogs, bottomsheets, 

Get.back();

This method is used to go to the next screen and remove the previous screen. This method is helpful when we use SplashScreens, login screens and etc.

Get.off(NextScreen());

This method is used to go to the next screen and remove all previous routes. This method is useful when we use shopping carts, polls, and tests, etc.

Get.offAll(NextScreen());

 To complete Mobile app UI design shadows takes someplace. In Flutter adding shadows to the widget is very easy. There are some ways we can achieve shadow in widgets. In this Tutorial, we see the two methods.

• Using Container Widget
• Using Card Widget

1. Using Container Widget

The Container widget is one of the popular widgets in the flutter. As you know the Container widget has the decoration property. The decoration property takes the BoxShadow.

BoxShadow Example,

boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],

Full Container Widget example,

Container(
          margin:
              const EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
          height: MediaQuery.of(context).size.height / 2,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5), //shadow color
                spreadRadius: 5, // spread radius
                blurRadius: 7, // shadow blur radius
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
        ),

You can change the shadow position by changing the offset value. Also, you can change the shadow color, blur radius, spread radius.

Next, we will see the second method.

2. Using Card Widget

Using the card widget is a very easy approach. For example,

        Card(
          elevation: 8,
          shadowColor: Colors.blue,
          child: Container(
            width: 300,
            height: 200,
            color: Colors.blue,
          ),
        )

You can change shadow size by changing elevation property value.