Flutter伪微信-005-自定义Style设置页面颜色

前言

微信的设计风格是属于简约形的，页面以白色为主，赋值以灰白色，实现简约风格。

预览

下一节完成消息页的截图

真实手机截图

实现

定义Style常量类

在lib/constant/style.dart自定义Style常量类

import 'package:flutter/material.dart';

// 本 app 颜色
class Style {

  ///脚手架组件背景颜色
  static const Color scaffoldBackgroundColor = Color.fromRGBO(247,247,247,5);

  ///AppBar背景颜色
  static const Color appBarBackgroundColor = Color.fromRGBO(247,247,247,5);
  static const Color appBarTextColor = Colors.black;

  ///底部导航栏背景颜色
  static const Color navBarBgColor = Colors.white70;
  ///底部导航栏选中颜色
  static const Color navBarSelectedItemColor = Colors.green;
  ///底部导航栏不选中颜色
  static const Color navBarUnSelectedItemColor = Colors.black45;

  ///内容背景颜色
  static const Color contentBackgroundColor = Colors.white;

  ///消息页搜索背景颜色
  static const Color messageSearchBackgroundColor = Color.fromRGBO(247,247,247,5);

}

修改main.dart文件

• 修改脚手架背景颜色

import 'package:flutter/material.dart';
import 'package:pseudo_we_chat/pages/index/index.dart';

import 'constant/style.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          //修改脚手架背景颜色
          scaffoldBackgroundColor: Style.scaffoldBackgroundColor,
        ),
        home: const IndexPage());
  }
}

修改index.dart文件

• 设置阴影效果为0
• 设置导航栏的背景颜色
• 设置选中图标颜色
• 设置未选中图标颜色

BottomNavigationBar(
  //设置阴影效果为0
  elevation: 0,
  //设置导航栏的背景颜色
  backgroundColor: Style.navBarBgColor,
  //设置选中图标颜色
  selectedItemColor: Style.navBarSelectedItemColor,
  //设置未选中图标颜色
  unselectedItemColor: Style.navBarUnSelectedItemColor,
  //设置选中文字大小
  selectedLabelStyle: const TextStyle(fontSize: 14),
  //设置未选中文字大小
  unselectedLabelStyle: const TextStyle(fontSize: 14),
  //设置类型
  type: BottomNavigationBarType.fixed,
  //设置选中下标
  currentIndex: _index,
  //设置按钮按下事件
  onTap: _onBottomNavigationBarTapped,
  //调用构建导航栏组件方法
  items: _getNavBarItem(),
)

结果

项目链接

github.com/BadKid90s/p…