深入了解fluttertheme

Flutter 是一種面向移動和桌面平台的開源移動應用程序開發框架。Flutter 支持快速開發優美的、高度保真的應用程序，包括動畫、圖片、圖標等。FlutterTheme 是一個 Flutter 插件，可以更改 Flutter 應用程序的主題，使用戶可以輕鬆地在應用程序之間切換自定義主題。

一、基礎使用

使用 FlutterTheme 比較簡單，只需要在 MaterialApp 里使用一個 FlutterTheme 部件並向其中傳入一些主題即可。Fluttertheme 主題分為深色主題和淺色主題，可以用來設置應用程序的顏色、字體等。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return FlutterTheme(
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.yellow,
      ),
      darkTheme: ThemeData.dark(),
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        home: Scaffold(
          appBar: AppBar(),
        ),
      ),
    );
  }
}

在上面的例子中，我們創建了一個 FlutterTheme 的實例並使用自定義主題屬性。對於這個例子，它將當前的主題設置為藍色字段（primaryColor）和黃色字段（accentColor），這些顏色將應用於 MaterialColor 主題。FlutterTheme 默認使用 MaterialColor 主題，但是你可以在 FlutterTheme 部件中使用任何類型的主題。

二、自定義主題

除了使用預定義主題之外，FlutterTheme 還可以使用自定義主題。以下是如何自定義 Flutter 主題的示例：

FlutterTheme(
  theme: ThemeData(
    primarySwatch: Colors.green,
    brightness: Brightness.light,
    backgroundColor: Colors.blue,
    fontFamily: 'Montserrat',
  ),
  darkTheme: ThemeData(
    primarySwatch: Colors.green,
    brightness: Brightness.dark,
    backgroundColor: Colors.black,
    fontFamily: 'Montserrat',
  ),
  child: MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text(
          'Hello, FlutterTheme!',
          style: TextStyle(fontSize: 32),
        ),
      ),
    ),
  ),
)

在上面的例子中，我們創建了一個自定義主題，其中文本顏色（primarySwatch）為綠色，主題亮度為明亮，背景顏色為藍色。我們還創建了一個黑暗主題，將文本顏色設置為綠色，背景顏色設置為黑色。

三、主題切換

FlutterTheme 還支持動態切換主題。以下是一個示例，演示如何在應用程序中切換 FlutterTheme：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  bool _isDark = false;

  void _toggleTheme() {
    setState(() {
      _isDark = !_isDark;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterTheme(
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.yellow,
      ),
      darkTheme: ThemeData.dark(),
      isDark: _isDark,
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        home: Scaffold(
          appBar: AppBar(
            actions: [
              IconButton(
                icon: Icon(Icons.brightness_medium),
                onPressed: _toggleTheme,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代碼中，我們在應用程序根部件中添加了一個 FloatingActionButton，這個部件被點擊後，切換主題的狀態。在切換主題的回調函數中，我們使用 setState 函數更新應用程序的狀態，使其重新構建。在布局中，我們使用了一個 IconButton 部件，這個部件在被按下後會切換主題狀態。

四、結論

到目前為止，我們已經介紹了 FlutterTheme 的基礎用法、自定義主題和主題切換。FlutterTheme 可以讓你的應用程序更加靈活，讓你的用戶可以更好地控制應用程序的外觀和感覺。在你的下一個應用程序中給它一個試試吧！