如何在 flutter 中创建一个透明的 UI？

Question

我想在flutter中创建一个透明UI

你能帮我写代码吗？

这是我需要的 link。

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

只需用不透明度小部件包围要使其透明的小部件或小部件树，并指定从 0.0 到 1.0 的不透明度值

例如： 0.0 表示完全不可见， 0.5表示半透明， 1.0 表示完全可见。

Answer 2

这个例子可以帮助解决你的问题代码片段

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 3

    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.

如何在 flutter 中创建一个透明的 UI？

How to create a transparent UI in flutter?

user-interface

transparent

flutter