Flutter 自定义主题 第1卷

欢迎来到 Flutter 自定义主题的第一卷。

每个主题都有一个单独的文件，您可以随意下载文件，或者如果您想尝试所有主题，请 fork 完整的存储库。

请给个星，别犹豫！

如何使用主题？

需要更多自定义？跳到 #mods。

每个主题都创建为可在任何 Flutter 应用中自动使用，并且已在常规应用程序的默认小部件上进行了测试。

以下是如何将存储库中的每个文件安装的说明

  1. 下载您想要使用的文件并将其导入到您的项目中。
  2. 在您的主文件中，只需将其作为 light 和 dark 主题的参数传递即可。

import 'package:flutter/material.dart';
import 'package:YOUR_APP/YOUR_ROUTE/flutter_monokai_theme.dart'; // This is an exaple using the Monokai theme.
import 'package:YOUR_APP/YOUR_ROUTE/welcome_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'A new flutter project',
      theme: FlutterMonokaiTheme.lightTheme,
      darkTheme: FlutterMonokaiTheme.darkTheme,
      home: WelcomeScreen(),
    );
  }
}
  1. 运行您的应用程序。尽情享用！

主题列表

      自定义

      您可能需要为想要自定义的小部件传递一个特定的颜色。

      这是一个示例，展示了如何为 AppBar 着色，使用您正在使用的主题中的特定颜色。

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary, // Modify it like this. You can select the specific color by checking the theme file. 
      leading: IconButton(
        color: Theme.of(context).colorScheme.primary,
        icon: const Icon(Icons.arrow_back_outlined),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      title: Text("Settings",
          style: TextStyle(
              color: Theme.of(context).colorScheme.onSurfaceVariant)), // Modify it like this. You can select the specific color by checking the theme file. 
    ),
    body: ListView(
      children: [
        ListTile(
          leading: IconButton(
            icon: const Icon(Icons.help),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const ConejozManual(),
                ),
              );
            },
          ),
          title: Text(
            'Manual',
            style: TextStyle(color: Theme.of(context).colorScheme.onPrimary), // Modify it like this. You can select the specific color by checking the theme file. 
          ),
          subtitle: const Text('Some cool stuff here'),
          trailing: Icon(Icons.arrow_forward_ios,
              color: Theme.of(context).colorScheme.primary),
        ),
      ],
    ),
  );
}
}

      注意事项

      • 更多主题正在开发中。请继续关注。
      • 欢迎贡献。请提交您的拉取请求。
      • 在 Google Play 商店查看我的应用程序，以便您可以看到主题的实际效果。留下一个很棒的评论。多喝水。和平！

      GitHub

      查看 Github