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.
PageRouteBuilder
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
Other Flutter Examples
|
Article Contributed By :
|
|
|
|
|
7403 Views |
|