Flutter UI主题插件leitmotif的使用

在本教程中，我们将详细介绍如何在Flutter项目中使用leitmotif插件。leitmotif是一个集合了多种自定义UI组件的Flutter插件，基于Material Design，并提供了如Snackbar、AppBar和设置面板等自定义实现。

什么是Leitmotif?

Leitmotif 是一个用于Flutter的UI工具包，它实现了Leitmotif设计语言。Leitmotif补充了Flutter默认的Material Widgets，包括定制化的Snackbars、AppBars和实用屏幕（例如验证用户年龄和展示应用许可证）。此外，还包括一些辅助功能屏幕。

Leitmotif 来源于德语单词 Leitmotiv，意为音乐或文学中的主导主题。

Leitmotif 基于已停止维护的 lit_ui_kit 项目构建而成。

了解更多请访问我们的 官网。

该插件由 LitLifeSoftware 开发和维护。

开始使用

导入插件

首先，确保在你的Flutter项目中添加leitmotif依赖。在项目的pubspec.yaml文件中添加以下内容：

dependencies:
  leitmotif: ^最新版本号

然后运行以下命令以更新依赖项：

flutter pub get

在代码中导入leitmotif：

import 'package:leitmotif/leitmotif.dart';

使用示例

以下是一个完整的示例，展示如何使用leitmotif插件来创建一个基础的应用程序。

示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:leitmotif/leitmotif.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class LeitmotifExample extends StatefulWidget {
  @override
  _LeitmotifExampleState createState() => _LeitmotifExampleState();
}

class _LeitmotifExampleState extends State<LeitmotifExample> {
  @override
  void initState() {
    super.initState();
    ImageCacheController(
        assetImages: ["assets/images/launcher_placeholder.png"],
        context: context);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Leitmotif',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: LitSansSerifStyles.theme,
        useMaterial3: true,
      ),
      localizationsDelegates: const [
        LeitmotifLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: LeitmotifLocalizations.supportedLocales,
      home: ExampleHomeScreen(),
    );
  }
}

class ExampleHomeScreen extends StatefulWidget {
  @override
  _ExampleHomeScreenState createState() => _ExampleHomeScreenState();
}

class _ExampleHomeScreenState extends State<ExampleHomeScreen> {
  bool shouldHideNavigationBar = false;
  bool dark = false;

  void toggleShouldHideNavigationBar() {
    setState(() {
      shouldHideNavigationBar = !shouldHideNavigationBar;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LitTabView(
      dark: dark,
      tabs: [
        LitNavigableTab(
          tabData: LitBottomNavigationItemData(
            icon: LitIcons.home_alt,
            iconAlt: LitIcons.home,
            index: 0,
            title: "home",
          ),
          screen: _ExampleScreen(
            onHideBottomNavigation: toggleShouldHideNavigationBar,
            dark: dark,
            onToggleDark: (value) {
              setState(() {
                dark = !dark;
              });
            },
          ),
        ),
        LitNavigableTab(
          tabData: LitBottomNavigationItemData(
            icon: Icons.font_download,
            iconAlt: Icons.font_download_off_outlined,
            index: 1,
            title: "Font",
          ),
          screen: _ExampleScreenTwo(),
        ),
        LitNavigableTab(
          tabData: LitBottomNavigationItemData(
            icon: LitIcons.folder_solid,
            iconAlt: LitIcons.folder,
            index: 2,
            title: "Icons",
          ),
          screen: _ExampleScreenThree(),
        ),
      ],
    );
  }
}

// 其他组件省略...

截图

以下是leitmotif的一些示例截图：

示例应用	Snackbar

Date Picker	Licence Screen

本地化

leitmotif 的小部件目前支持 English 和 German 两种语言。要使用默认的本地化，请在 MaterialApp 中添加 LeitmotifLocalizationsDelegate。

MaterialApp(
  localizationsDelegates: const [
    LeitmotifLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en', ''),
    Locale('de', ''),
  ],
  home: ExampleHomeScreen(),
);

图标

leitmotif 提供了自己的图标集 (LitIcons)，这些图标存储在一个 .ttf 文件中，并作为 Dart 的 IconData 对象实现。

例如：

Icon(LitIcons.home)