Flutter 底部（手勢條）和頂部導航欄沉浸適配多主題

適配原理

頂部導航欄和狀態欄沉浸實現比較簡單，設置Scaffold的AppBar背景色即可，其中surfaceTintColor可以設置IOS滑動之後狀態欄顏色，不想要顯示頂部導航欄高度設置toolbarHeight:0，陰影設置elevation: 0。

@override
Widget build(BuildContext context) {
  var bg = Theme.of(context).colorScheme.surface;
  return Scaffold(
    appBar: AppBar(
      elevation: 0,
      toolbarHeight: 0,
      backgroundColor: bg,
      surfaceTintColor: bg,
    ),
    backgroundColor: bg,
  )
}

底部導航欄即手勢條，也叫小白條。IOS不需要特別適配，設置colorScheme的surface背景即可。

ThemeData lightMode = ThemeData(
  useMaterial3: true,
  colorScheme: const ColorScheme.light(
    surface: Color.fromARGB(255, 242, 247, 251),
  ),
);

適配代碼

Android底部手勢條需要特別適配，下麵的代碼同樣適用於IOS

亮色主題

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

ThemeData lightMode = ThemeData(
  useMaterial3: true,
  // 沉浸的關鍵代碼
  appBarTheme: const AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 去除狀態欄遮罩
      statusBarIconBrightness: Brightness.dark, // 狀態欄圖標字體顏色
      systemNavigationBarColor: Color.fromARGB(255, 242, 247, 251), // 底部導航欄顏色
    )
  ),
  colorScheme: const ColorScheme.light(
    surface: Color.fromARGB(255, 242, 247, 251), // 和底部導航欄保持一致
    surfaceBright: Color(0x00FFFFFF), // 透明背景
    primary: Color.fromARGB(255, 89, 54, 133),
    secondary: Color(0xFFE3EDF2),
    tertiary: Colors.black,
    onSecondary: Colors.black,
    secondaryContainer: Color(0xFFE3EDF2), // 骨架屏底色
    onSecondaryContainer: Color.fromARGB(255, 242, 247, 251), // 骨架屏亮色
    inversePrimary: Colors.black54,
  ),
);

暗色主題

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

ThemeData darkMode = ThemeData(
  useMaterial3: true,
  // 沉浸的關鍵代碼
  appBarTheme: const AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
      systemNavigationBarColor: Color(0xFF121012),  // 和主背景surface保持一致
    )
  ),
  colorScheme: const ColorScheme.dark(
    surface: Color(0xFF121012), 
    surfaceBright: Color(0x00000000), // 透明背景
    primary: Color.fromARGB(255, 89, 54, 133),
    secondary: Color(0xFF382C3E),
    tertiary: Colors.white,
    onSecondary: Colors.white30, // 骨架屏底色
    secondaryContainer: Color.fromARGB(255, 12, 11, 12), // 骨架屏亮色
    onSecondaryContainer: Colors.black26,
    inversePrimary: Colors.white54,
  ),
);

使用Provider

你需要安裝 provider

flutter pub add provider

動態切換代碼

import 'package:flutter/material.dart';
import 'package:video_app/theme/dark_theme.dart';
import 'package:video_app/theme/light_theme.dart';

class ThemeProvider extends ChangeNotifier {
  ThemeData _themeData = lightMode;

  ThemeData get themeData => _themeData;

  ThemeData get darkTheme => darkMode;
  ThemeData get lightTheme => lightMode;

  set themeData(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }

  void toggleTheme() {
    if (_themeData == lightMode) {
      themeData = darkMode;
    } else {
      themeData = lightMode;
    }
  }
}

主題設置

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: designSize,
      builder: (context, child) {
        return MaterialApp(
          theme: Provider.of<ThemeProvider>(context).themeData, // 動態主題
          darkTheme: Provider.of<ThemeProvider>(context).darkTheme, // 暗色主題，設置後不能手動切換
          home: const RootScreen(),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

本文來自博客園，作者：sw-code，轉載請註明原文鏈接：https://www.cnblogs.com/sw-code/p/18305045