How to create a transparent UI in flutter? - user-interface

Question

I want to create a tranparent UI in flutter.
Can you help me with the code?
Here is the link to the stuff I need.
https://dribbble.com/shots/3958928-Wikipedia-App/attachments/904403
https://dribbble.com/shots/1081917-WhereTO-App
https://dribbble.com/shots/1539644-App-Mockup
https://dribbble.com/shots/1254375-Events-More/attachments/171069

Answer 1

This example my help to resolve your problem
Code Snippet
Widget build(BuildContext context) {
List list = ['Introduction','Early life', 'Non-Film work', '2012-present', 'Controversy'];
return new Container(
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image.asset('assets/bg_img.jpg', fit: BoxFit.fitHeight,),
new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
elevation: 0.0,
backgroundColor: const Color(0xFFB4C56C).withOpacity(0.5),
),
backgroundColor: Colors.transparent,
body: new Center(
child: new Center(
child: new BackdropFilter(
filter: new ui.ImageFilter.blur(
sigmaX: 6.0,
sigmaY: 6.0,
),
child: new Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: const Color(0xFFB4C56C).withOpacity(0.01),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
),
child: new Container(child: ListView.builder(itemBuilder: (contex, index){
return index == 0?new Container(
height: 50.0,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(
color: const Color(0xFFB4C56C).withOpacity(0.7),
borderRadius: BorderRadius.all(Radius.circular(25.0)),
boxShadow: [new BoxShadow(color: Colors.black12,offset: new Offset(2.0, 2.0), blurRadius: 2.0 )]
),child: new Row(children: <Widget>[
new Icon(Icons.info, color: Colors.white,),
new SizedBox(width: 8.0),
new Text(list[index], style: TextStyle(color: Colors.white70, fontSize: 18.0))
],),
):new ListTile(title: new Text(list[index], style: TextStyle(color: Colors.white),), leading: new Text('${index}',
style: TextStyle(color: const Color(0xFFB4C56C), fontSize: 18.0)),);
}, itemCount: list.length,),),
),
),
),
),
)
],),
);
}
Complete source code can be dowloaded from here blue_effect

Answer 2

You can override PageRoute like this
import 'package:flutter/cupertino.dart';
class TransparentRoute extends PageRoute<void> {
TransparentRoute({
#required this.builder,
RouteSettings settings,
}) : assert(builder != null),
super(settings: settings, fullscreenDialog: false);
final WidgetBuilder builder;
#override
bool get opaque => false;
#override
Color get barrierColor => null;
#override
String get barrierLabel => null;
#override
bool get maintainState => true;
#override
Duration get transitionDuration => Duration(milliseconds: 350);
#override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
final result = builder(context);
return FadeTransition(
opacity: Tween<double>(begin: 0, end: 1).animate(animation),
child: Semantics(
scopesRoute: true,
explicitChildNodes: true,
child: result,
),
);
}
}
/// And you can push like this
Navigator.of(context).push(
TransparentRoute(
builder: (BuildContext
context) =>
TransParentView()));
///New container to push
class TransParentView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black.withOpacity(0.6),
body: Padding(
padding: const EdgeInsets.all(27.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
height: 700,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 60,
),
Container(
width: 160,
height: 100,
),
Container(
height: 290,
width: 250,
),
Container(
height: 150,
),
],
),
),
),
),
);
}
}
Hope this will help.

Answer 3

Just surround the widget or widget tree you want to make transparent with an Opacity widget and specify the opacity value from 0.0 to 1.0
For example:
0.0 means completely invisible,
0.5 means half way transparent,
1.0 means fully visible.