Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Flutter Transparent Background Page

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


2687 Views

Author: RRTutors

Flutter Questions

Android Questions