不同的小部件改變主題 flutter dart

Question

我想在我的 flutter 應用程序中使用某些 colors 實現多個主題。 現在我希望用戶能夠在暗模式和亮模式之間切換，但是當應用暗模式時，小部件會有所不同......看看下面的設計

如您所見，小部件完全不同...如果您知道該怎么做，請給我答案，謝謝！

Answer 1

為此，您必須實現一個用於更改主題的 MultiProvider，一個用於保存和恢復布爾值的 sharedpreferences 插件。 要更改某種顏色，請使用 boolean。 例子：

mytheme.dart

const MaterialColor myColor = MaterialColor(0xFF134E57, <int, Color>{
  50: Color(0xFFE6ECED),
  100: Color(0xFFBFD0D3),
  200: Color(0xFF95B1B5),
  300: Color(0xFF6B9297),
  400: Color(0xFF4B7A81),
  500: Color(0xFF2B636B), //warna tombol add
  600: Color(0xFF265B63),
  700: Color(0xFF205158),
  800: Color(0xFF1A474E),
  900: Color(0xFF10353C),
});

ThemeData light = ThemeData(
  fontFamily: 'NunitoRE',
  brightness: Brightness.light,
  primarySwatch: myColor,
  textTheme: const TextTheme(bodyText2: TextStyle(color: Color(0xff010101))),
  appBarTheme: const AppBarTheme(
    iconTheme: IconThemeData(color: Color(0xfffafafa)),
    backgroundColor: Color(0xFF134E57),
    titleSpacing: 0,
    elevation: 0,
    centerTitle: false,
    titleTextStyle: TextStyle(color: Color(0xfffafafa), fontSize: 18, fontFamily: "NunitoBL", shadows: shaDow),
  ),
);

ThemeData dark = ThemeData(
  fontFamily: 'NunitoRE',
  brightness: Brightness.dark,
  hintColor: const Color(0xb3ffffff),
  focusColor: const Color(0xb3ffffff),
  textTheme: const TextTheme(bodyText2: TextStyle(color: Color(0xfffafafa))),
  appBarTheme: const AppBarTheme(
    elevation: 0,
    iconTheme: IconThemeData(color: Color(0xfffafafa)),
    backgroundColor: Color(0xFF222222),
    titleSpacing: 0,
    centerTitle: false,
    titleTextStyle: TextStyle(color: Color(0xfffafafa), fontSize: 18, fontFamily: "NunitoBL", shadows: shaDow),
  ),

);

這是主題my_prov.dart的提供者

import 'package:flutter/foundation.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyProv extends ChangeNotifier {
  final String mytheme = "mytheme";
  SharedPreferences _prefs;

  bool _isDark;

  bool get isDark => _isDark;

  MyProv() {
    _isDark = false;
    _loadFromPrefs();
  }

  toggleTheme() {
    _isDark = !_isDark;
    _saveToPrefs();
    notifyListeners();
  }



  _initPrefs() async {
    if (_prefs == null) {
      return _prefs = await SharedPreferences.getInstance();
    }
  }

  _loadFromPrefs() async {
    await _initPrefs();
    _isDark = _prefs.getBool(mytheme) ?? false;
    notifyListeners();
  }

  _saveToPrefs() async {
    await _initPrefs();
    _prefs.setBool(mytheme, _isDark);
  }
}

main.dart我們作為 Multiprovider 返回

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'home.dart';
import 'package:my_app_name/my_prov.dart';
import 'package:my_app_name/mytheme.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider<MyProv>(create: (_) => MyProv()),
        ],
        child: Consumer<MyProv>(
          builder: (context, MyProv notifier, child) {
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              theme: notifier.isGel ? dark : light,
              home: const Home(),
            );
          },
        ));
  }
}

主頁.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:my_app_name/my_prov.dart';
import 'package:my_app_name/mytheme.dart';

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // all colors will follow my_theme.dart theme colors.
    // but if you want to make a different color, simply add a boolean isDark in front of it, then fill it with the color you want
    return Consumer<MyProv>(
      builder: (context, notifier, child) => Scaffold(
        drawer: const Drawer(),
        appBar: AppBar(
          backgroundColor: Theme.of(context).focusColor, //
          title: Text('My App'),
          actions: [
            IconButton(
              onPressed: () {
                notifier.toggleTheme();
              },
              icon: notifier.isDark ? Icon(Icons.brightness_3) : Icon(Icons.light_mode),
            ),
          ],
        ),
        body: Column(
          children: [
            Container(
              height: 200,
              width: double.infinity,
              color: notifier.isDark ? Color(0xFF085C75) : Color(0xFF427508),
            ),
          ],
        ),
      ),
    );
  }
}

我希望這個解決方案可以解決你的問題

Answer 2

在非常努力地理解 Material Design 之后，我發現了以下簡單干凈的解決方案。

color_scheme.dart

import 'package:flutter/material.dart';

const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF687DAF),
  onPrimary: Color(0xFFFFFFFF),
  secondary: Color(0xFFf37b67),
  onSecondary: Color(0xFFFFFFFF),
  error: Color(0xFFBA1A1A),
  onError: Color(0xFFFFFFFF),
  background: Color(0xFFFEFFFF),
  onBackground: Color(0xFF3b3b3b),
  surface: Color(0xFFFEFFFF),
  onSurface: Color(0xFF3b3b3b),
);

const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xFFADC6FF),
  onPrimary: Color(0xFF002E69),
  secondary: Color(0xFFBBC6E4),
  onSecondary: Color(0xFF253048),
  error: Color(0xFFFFB4AB),
  onError: Color(0xFF690005),
  background: Color(0xFF1B1B1F),
  onBackground: Color(0xFFE3E2E6),
  surface: Color(0xFF1B1B1F),
  onSurface: Color(0xFFE3E2E6),
);

主題.dart

import 'package:first_project/shared/color_schemes.dart';

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

final ThemeData lightThemeDataCustom = _buildLightTheme();

ThemeData _buildLightTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: lightColorScheme,
    primaryColor: lightColorScheme.primary,
    scaffoldBackgroundColor: lightColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.light().textTheme),
  );
}

final ThemeData darkThemeDataCustom = _buildDarkTheme();

ThemeData _buildDarkTheme() {
  final ThemeData base = ThemeData.dark();
  return base.copyWith(
    colorScheme: darkColorScheme,
    primaryColor: darkColorScheme.primary,
    scaffoldBackgroundColor: darkColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.dark().textTheme),
  );
}

main.dart

import 'package:first_project/shared/theme_two.dart';
import 'package:flutter/services.dart';

import '../screens/bottom_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: lightThemeDataCustom,
      darkTheme: darkThemeDataCustom,
      home: const BottomBar(),
    );
  }
}

如果您遵循這種方法，那么您不需要在每個小部件中定義 colors。 只需更改配色方案，flutter 會根據 Light 主題和 Dark 主題自動更改 colors。

我不添加 textTheme 自定義代碼，但您可以在 theme.dart 文件中添加。