美文网首页
Flutter AppBar 自定义导航样式-带阴影

Flutter AppBar 自定义导航样式-带阴影

作者: StevenHu_Sir | 来源:发表于2019-10-16 15:17 被阅读0次

效果图

效果图

关键代码-通过:MediaQuery.removePadding

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: clicpBoardKey,
      body: Column(
        children: <Widget>[
          MediaQuery.removePadding(
            context: context,
            child: AppBar(
              centerTitle: false,
              backgroundColor: Colors.white,
              title: _customleading(context),
              titleSpacing: -ScreenUtil().setWidth(80),
              elevation: 0,
            ),
            removeBottom: true,
          ),
          Opacity(
            opacity: 0.06,
            child: Container(
              height: ScreenUtil().setHeight(50),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    stops: [
                      .3,
                      .6
                    ],
                    colors: [
                      Color(0xff565656),
                      Color(0xFF727272).withOpacity(0.19),
                    ],
                    begin: Alignment(gradient['beginX'], gradient['beginY']),
                    end: Alignment(gradient['endX'], gradient['endY'])),
              ),
            ),
          ),
        /// 底部工具条
          DetailsBottom(),
        ],
      ),
    );
  }
  
  /// 自定义聊天leading
  Widget _customleading(BuildContext context, {Color color}) {
    return Container(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          GestureDetector(
            child:
                Icon(Icons.arrow_back_ios, size: 20, color: Color(0xff333333)),
            onTap: () {
              Navigator.of(context).maybePop();
            },
          ),
          GestureDetector(
            onTap: () async {
              //Toast.show("partnerInfo.user.uid:${partnerInfo.user.uid}");
              ///不需要解锁-直接进入详情页
              await Navigator.of(context).pushNamed(
                  '${HomeRoute.otherUserHome}?uid=${partnerInfo.user.uid}');
            },
            child: Row(
              children: <Widget>[
                partnerInfo != null
                    ? Container(
                        margin: EdgeInsets.only(left: 10),
                        width: 24,
                        height: 24,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Color(0xFFA7A7A7),
                                offset: Offset(0, 1),
                                blurRadius: 5,
                              )
                            ],
                            borderRadius:
                                BorderRadius.all(const Radius.circular(12)),
                            image: DecorationImage(
                                image: NetworkImage(
                                    partnerInfo.user.headimgurl ?? ''),
                                alignment: Alignment.topCenter)),
                      )
                    : Container(),
                Container(
                  child: Text(
                    partnerInfo != null && partnerInfo.user.nickname != null
                        ? partnerInfo.user.nickname
                        : '好友详情',
                    style: TextStyle(
                        color: Color(0xff000000),
                        fontSize: ScreenUtil().setSp(29)),
                  ),
                  margin: EdgeInsets.only(left: 10),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

AppBar其他使用

import 'package:flutter/material.dart';

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('本地优惠'),
        leading: IconButton(
            icon: new Icon(Icons.face),
            onPressed: () {
              Navigator.pop(context);
            }),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'tooltip1',
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'tooltip2',
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.playlist_add_check),
            tooltip: 'tooltip3',
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          FlutterLogo(
            size: 100.0,
            colors: Colors.red,
          )
        ],
      ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter AppBar 自定义导航样式-带阴影

      本文链接:https://www.haomeiwen.com/subject/qxkumctx.html