首页 > 其他分享 >flutter使用getwidget的ui组件库的底部导航用法

flutter使用getwidget的ui组件库的底部导航用法

时间:2022-11-29 15:22:27浏览次数:68  
标签:TextStyle fontSize const Icons color ui getwidget flutter Icon

参考github上getwidget-app-kit  

import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
import 'package:flutter/cupertino.dart';

class BottomLabelTab extends StatefulWidget {
  @override
  _BottomLabelTabState createState() => _BottomLabelTabState();
}

class _BottomLabelTabState extends State<BottomLabelTab>
    with SingleTickerProviderStateMixin { // 加红的地方很重要,不然初始化中的this指向会有问题
  TabController? tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this);
  }

  @override
  void dispose() {
    tabController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          backgroundColor: GFColors.DARK,
          leading: InkWell(
            onTap: () {
              Navigator.pop(context);
            },
            child: Icon(
              CupertinoIcons.back,
              color: GFColors.SUCCESS,
            ),
          ),
          title: const Text(
            'Bottom Labeled Tabs',
            style: TextStyle(fontSize: 17),
          ),
          centerTitle: true,
        ),
        body: Container(
            height: MediaQuery.of(context).size.height,
            child: GFTabBarView(
              controller: tabController,
              children: <Widget>[
                Center(
                  child: Icon(
                    Icons.home,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.music_note,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.games,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.notifications,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                )
              ],
            )),
              bottomNavigationBar: Container(
              child: GFTabBar(
            length: 1,
            controller: tabController,
            tabs: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.home,
                  ),
                  const Text(
                    'Home',
                    style: TextStyle(
                      fontSize: 10,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.music_note,
                  ),
                  const Text(
                    'Music',
                    style: TextStyle(
                      fontSize: 10,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.games,
                  ),
                  const Text(
                    'Games',
                    style: TextStyle(
                      fontSize: 10,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.notifications,
                  ),
                  const Text(
                    'Notifications',
                    style: TextStyle(
                      fontSize: 10,
                    ),
                  )
                ],
              ),
            ],
            indicatorColor: GFColors.SUCCESS,
            labelColor: GFColors.SUCCESS,
            labelPadding: const EdgeInsets.all(8),
            tabBarColor: GFColors.DARK,
            unselectedLabelColor: GFColors.WHITE,
            labelStyle: const TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 13,
              color: Colors.white,
              fontFamily: 'OpenSansBold',
            ),
            unselectedLabelStyle: const TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 13,
              color: Colors.black,
              fontFamily: 'OpenSansBold',
            ),
          ),
        ),
      );
}

 

标签:TextStyle,fontSize,const,Icons,color,ui,getwidget,flutter,Icon
From: https://www.cnblogs.com/lude1994/p/16935483.html

相关文章

  • 不好意思,UUID 该换了!
    ULID:UniversallyUniqueLexicographicallySortableIdentifier(通用唯一词典分类标识符)UUID:UniversallyUniqueIdentifier(通用唯一标识符)为什么不选择UUIDUUID目前有......
  • 瓴羊Quick BI企业数据分析工具,公司运营实时掌控
    众所周知,数字化管理是企业通过信息技术融合应用,打通数据链条,提升企业数据价值挖掘、产品业务创新、推动企业战略转型、构建数据驱动型现代化企业的重要举措。随着新一代企业......
  • layui6
    列边距​经过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还能够进一步保证分列的宽度......
  • layui7
    列偏移​对列追加相似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 号表明的是偏移占据的列数,可选中为1-12。​如:layui-col-md-offset3*,即表明在“中......
  • layui8
    列嵌套​能够对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row),便可完成嵌套。<h3>列嵌套</h3><divclass="layui-rowlayui-col-space5"><......
  • layui9
    1.table数据表格文档1.三种初始化渲染方式方式机制适用场景 01.方法渲染用JS方法的配置完成渲染(推荐)无需写过多的HTML,在JS中指定原始元素,再设定各项参数......
  • vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of unde
    https://blog.csdn.net/ZouZhaoqian/article/details/125779621?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFro......
  • The current Flutter SDK version is 0.0.0-unknown.
    参考:https://blog.csdn.net/phunxm/article/details/117316761   问题:安装插件的时候显示flutter的sdk版本不对,但实际上是没问题的ThecurrentFlutterSDKversi......
  • 项目中elementui时间线的使用~✔✔
    Vue项目项目中经常会遇到事件线的功能Timeline,比如说快递跟踪功能等。element.js时间线的使用,先来看效果图是因为element2.6.0之前的版本不支持时间线组件了。所有下载......
  • flutter 画一条曲线
    1、代码Container(width:50,height:50,child:CustomPaint(size:Size(50,50),painter:MyPainter(),isComplex:false,willChange:false......