首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flutter BottomAppBar selected颜色

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高性能、美观的移动应用程序。BottomAppBar是Flutter中的一个组件,用于在应用程序底部显示导航栏。当用户选择某个导航项时,可以通过设置selected属性来改变选中项的颜色。

BottomAppBar的selected颜色可以通过设置selectedColor属性来实现。该属性接受一个颜色值作为参数,可以是预定义的颜色常量,也可以是自定义的颜色值。通过设置selectedColor属性,可以使选中项在导航栏中显示出不同的颜色,以提高用户体验。

下面是一个示例代码,演示如何使用BottomAppBar和设置selected颜色:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter BottomAppBar Selected Color'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.blue, // 设置导航栏的背景颜色
          selectedColor: Colors.red, // 设置选中项的颜色
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

在上述示例中,我们创建了一个包含三个导航项的BottomAppBar,并设置了背景颜色为蓝色,选中项的颜色为红色。可以根据实际需求自定义颜色。

腾讯云提供了丰富的云计算产品和服务,可以满足各种应用场景的需求。关于Flutter开发和移动应用部署,腾讯云提供了云开发(CloudBase)服务,可以帮助开发者快速构建、部署和管理移动应用。您可以访问腾讯云的官方网站(https://cloud.tencent.com/)了解更多关于云计算和移动开发的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Flutter沉浸式状态栏AppBar导航栏仿咸鱼底部凸起导航栏效果

    android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感。 ?...如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述。 ? ?...在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态栏颜色修改设置成透明,因为他本身是黑色半透明。...如上图:BottomAppBar组件凸起凹陷导航栏配置 int _selectedIndex = 0; // 创建数组引入页面 List pglist = [HomePage(), FindPage()...: pglist[_selectedIndex], // 抽屉菜单 // drawer: new Drawer(), // 底部凸起凹陷导航栏 bottomNavigationBar: BottomAppBar

    5.2K41

    Flutter 透明状态栏及字体颜色的设置方法

    AppBar之后,单独在build内设置这行代码会失效 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); ps:下面看下Flutter...修改状态栏颜色以及字体颜色 Flutter沉浸式状态栏 void main() { runApp(MyApp()); if (Platform.isAndroid) { // 以下两行 设置android...statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); } } Flutter...修改状态栏字体颜色 使用AnnotatedRegion包裹Scaffold,可以使得状态栏颜色改变,有dark和light两种 @override Widget build(BuildContext...透明状态栏及字体颜色的文章就介绍到这了,更多相关Flutter 状态栏字体颜色内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

    6.6K21

    Flutter 专题】128 图解 ColorTween 颜色补间动画 & ButtonBar 按钮容器

    和尚在尝试做主题颜色切换时,希望背景色有一个自然的过渡过程,于是了解到 ColorTween 颜色补间差值器,配合 AnimationController 实现两种颜色间的自然过渡;和尚简单尝试一下...lerp(double t) => Color.lerp(begin, end, t); } 案例源码 和尚预先设置好需要主题颜色切换的 UI Widget,之后通过混入 TickerProviderStateMixin...,在 initState() 初始化时设置好 AnimationController,将颜色传递给背景色; AnimationController _controller; Animation<Color...itemListWid()); })); 通过 AnimationController 控制淡入淡出时机;reset() 重置控制器,forward() 为 begin 到 end 颜色切换...;reward() 为 end 到 begin 颜色切换;repeat() 重复循环切换; _changeColorWid() => Container( color: Colors.white

    70020

    Flutter 封装多功能日志工具类 :Logger【终端输出带颜色

    LogE 举例,(macOS)终端输出效果如下: 引入 需要使用日志工具 我这里使用的是 logger ,映入方法如下 在 pubspec.yaml 中添加以下依赖: dependencies: flutter...: sdk: flutter # print colorful logs logger: ^1.0.0 封装 新建 utils 文件夹,如果项目中已经存在则跳过此步骤 在这个目录下,再新建一个...{ _logger.wtf("$_tag :: $msg"); } 使用 由于我们封装的方法都是全局的,所以直接使用即可 这里我们直接在 main.dart 中输出一个 Log 在终端中输入 flutter...run -d chrome (这里我写的是 flutter web,其他段对应修改平台即可) 结语 实力代码点击这里查看,求个 star 哈:easy_tab_controller 一款多功能的 flutter

    2.6K10

    Flutter 封装多功能日志工具类 :Logger【终端输出带颜色

    举例,(macOS)终端输出效果如下: # 引入 需要使用日志工具 我这里使用的是 logger ,映入方法如下 在 pubspec.yaml 中添加以下依赖: dependencies: flutter...: sdk: flutter # print colorful logs logger: ^1.0.0 # 封装 新建 utils 文件夹,如果项目中已经存在则跳过此步骤 在这个目录下,..._logger.wtf("$_tag :: $msg"); } # 使用 由于我们封装的方法都是全局的,所以直接使用即可 这里我们直接在 main.dart 中输出一个 Log 在终端中输入 flutter...run -d chrome (这里我写的是 flutter web,其他段对应修改平台即可) # 结语 实力代码点击这里查看,求个 star 哈:easy_tab_controller 一款多功能的...flutter 导航条仓库

    1.1K10
    领券