Flutter Transparent Background Page

Last updated Sep 24, 2020


In this post, we will learn how to create a transparent background in a flutter.

Suppose I have twp pages, Page1 and Page2, when I Navigate to page2 from page1, page2 should show with transparent background.

To create a Transparent background in flutter we have different ways.

  • Opacity widget
  • Animated Opacity
  • PageRouteBuilder

 

Transparent Background in Flutter

 

Refer  Transparent Background with Opacity widget

In this post, we are going to create a Transparent background with PageRouteBuilder

 

PageRouteBuilder({
  RouteSettings settings,
  @required this.pageBuilder,
  this.transitionsBuilder = _defaultTransitionsBuilder,
  this.transitionDuration = const Duration(milliseconds: 300),
  this.opaque = true,
  this.barrierDismissible = false,
  this.barrierColor,
  this.barrierLabel,
  this.maintainState = true,
  bool fullscreenDialog = false,
})

 

To make Transparent pass opaque parameter to false;

 

Let's start code

Step 1: Create a Flutter application

step 2: Create pages 

FirstPage

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("First Screen"),
        ),
      body: Stack(

        children: [
          Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS7ziH01h-PzYXrWg9lpsH6roPnrMxhz2V08A&usqp=CAU",fit: BoxFit.fill,width: double.infinity,height: double.infinity,),

          Positioned(
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            child: Center(
              child: FlatButton(
                color: Colors.red,
                textColor: Colors.white,
                child: Text("View Page"),onPressed: (){
                Navigator.of(context).push(
                  PageRouteBuilder(
                    opaque: false, // set to false
                    pageBuilder: (_, __, ___) => SecondPage(),
                  ),
                );
               // TransparentRoute(builder: (BuildContext context) => SecondPage());
               // Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondPage()));
              },),
            ),
          ),
        ],
      ),
      ),
    );
  }

}

 

Transparent Background Page

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Scaffold(
      appBar: AppBar(backgroundColor: Colors.red,title: Text("Second Page"),),
      backgroundColor: Colors.transparent,
      body: Container(
        color: Colors.black45,
        child: Center(
          child: Card(
          elevation: 20,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("This is my Second page with Transparent feature"),
                  FlatButton(
                    color: Colors.red,
                    textColor: Colors.white,
                    child: Text("Back"),onPressed: (){
                    Navigator.pop(context);
                  },),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

Final  Output with Transparent Background Page

Transparent Background in Flutter

 

 

 

Other Flutter Examples


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

4199 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions