Quickly configure three theme styles

Last update: Apr 21, 2022

flytheme

快速实现三种主题效果。

本插件是从矿小助App中拆分出来的,优化了很多细节,更加简单易用。

内置持久化存储(使用share_preference实现)

矿小助App:https://kxz.atcumt.com/

pub插件地址:https://pub.dev/packages/flytheme

github仓库地址:https://github.com/cnatom/flytheme

快速上手

首先,导入fly_theme到pubspec.yaml文件

flytheme: ^x.x.x

初始化

使用了share_preference对主题配置进行持久化存储,所以要在runApp()前进行初始化

void main() async{
  await FlyApp.init();//必须要添加
  runApp(MyApp());
}

使用

在入口处添加FlyApp

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return FlyApp(
      showBackgroundImg: true,//显示背景图片
      child: Scaffold(
        …………………………
      ),
    );
  }
}

FlyApp内置了MaterialApp,因此不需要再重复添加。

组件

所有的组件都需要在FlyApp的子树内使用。

组件 功能 主要包含组件
FlyApp 最上层组件,内置MaterialApp用于配置ThemeMode FlyTheme
FlyContainer 一个容器,能够自动根据主题配置改变外观。 FlyBackground、Container
FlyText 文字组件 Text
FlyBackground 放在FlyImage上层,用于为背景图添加模糊透明效果 FlyImage
FlyImage 背景图 Image
ThemeProvider 核心组件,用于跨组件共享,使用Provider实现 Provider
FlyTheme 主题配置 ThemeData

例子

样例视频:https://www.bilibili.com/video/BV13f4y137Kx?spm_id_from=333.999.0.0

import 'package:flutter/material.dart';
import 'package:flytheme/app.dart';
import 'package:flytheme/module/container.dart';
import 'package:flytheme/module/text.dart';
import 'package:flytheme/provider.dart';

void main() async {
  //必须要添加
  await FlyApp.init();
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return FlyApp(
      showBackgroundImg: true,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: FlyText("FlyTheme插件示例"),
        ),
        body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),

          child: Column(
            children: [

              _buildButton("白色主题", onTap: () {
                //切换 白色主题/透明主题
                FlyApp.setThemeWhite();
              }),
              _buildButton("黑色主题", onTap: () {
                //切换 黑色主题/透明主题
                FlyApp.setThemeBlack();
              }),
              _buildButton("修改背景图片", onTap: () {
                FlyApp.setBackImage();
              }),
              //修改主题色
              FlyContainer(
                padding: EdgeInsets.all(10),
                margin: EdgeInsets.all(10),
                child: _buildColorSelector(),
              ),
              _buildSliver("卡片透明",
                  value: FlyApp.transCard,//获取透明度
                  onChanged: (value) {
                setState(() {
                  FlyApp.transCard = value;//设置卡片透明度
                });
              }),
              _buildSliver("背景模糊",
                  value: FlyApp.blurBack,//获取透明度
                  max: 20,
                  onChanged: (value) {
                    setState(() {
                      FlyApp.blurBack = value;//设置卡片透明度
                    });
                  }),
              _buildSliver("背景透明",
                  value: FlyApp.transBack,//获取透明度
                  onChanged: (value) {
                    setState(() {
                      FlyApp.transBack = value;//设置卡片透明度
                    });
                  }),

            ],
          ),
        ),
      ),
    );
  }
  Widget _buildColorCir(Color color){
    return InkWell(
      onTap: (){
        //更改主题色
        setState(() {
          FlyApp.colorMain = color;
        });
      },
      child: Container(
        height: 30,
        width: 30,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            color: color
        ),
      ),
    );
  }
  Widget _buildButton(String text, {GestureTapCallback onTap}) {
    return InkWell(
      onTap: onTap,
      //FlyContainer会根据主题配置变换
      child: FlyContainer(
        padding: EdgeInsets.all(20),
        margin: EdgeInsets.all(10),
        child: Row(
          children: [
            //FlyText会根据主题配置变换
            FlyText(
              text,
              fontSize: 17,
            )
          ],
        ),
      ),
    );
  }

  Widget _buildTitleContainer(String title,
      {@required Widget child, GestureTapCallback onTap}) {
    return InkWell(
      onTap: onTap,
      //FlyContainer作为背景板
      child: FlyContainer(
        padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
        margin: EdgeInsets.all(10),
        alignment: Alignment.center,
        child: Row(
          children: [
            Expanded(
              flex: 2,
              //FlyText
              child: FlyText(
                title,
                fontSize: 17,
              ),
            ),
            Expanded(
              flex: 5,
              child: child,
            ),
          ],
        ),
      ),
    );
  }
  Widget _buildColorSelector(){
    List<Color> themeColors = [
      Color.fromARGB(255, 0, 196, 169),
      Color.fromARGB(255, 0, 186, 253),
      Color.fromARGB(255, 255, 64, 58),
      Color.fromARGB(255, 255, 116, 152),
      Color.fromARGB(255, 0, 109, 252),
      Color.fromARGB(255, 255, 206, 38),
      Color.fromARGB(255, 48, 54, 56),
      Color.fromARGB(255, 200, 200, 200),

    ];
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: themeColors.map((item){
          return _buildColorCir(item);
        }).toList(),
      ),
    );
  }

  Widget _buildSliver(String title,
      {@required double value,
      double max = 1.0,
      double min = 0.0,
      @required ValueChanged<double> onChanged}) {
    return _buildTitleContainer(title,
        child: Slider(
          activeColor: ThemeProvider().colorMain,//这里的主题色需要手动setState
          inactiveColor: Colors.black12,
          value: value,
          min: min,
          max: max,
          onChanged: onChanged,
        ));
  }
}

GitHub

https://github.com/cnatom/flytheme
You might also like...

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier. It is highly inspired by Bootstrap and Tailwind CSS. It also provide lots of extension methods on String, List and Map.

Mar 14, 2022

Localize your flutter application quickly and easily.

EzLocalization This package allows you to setup a powerful localization system with ease and in only a few minutes. Features Here are some features: E

Dec 18, 2021

Show beautiful bottom sheet as confirmation dialog quickly and easily.

Show beautiful bottom sheet as confirmation dialog quickly and easily.

sweetsheet Show beautiful bottom sheet as confirmation dialog quickly and easily. nice warning success danger and since version 0.2.0 , it is fully cu

Mar 12, 2022

A Flutter material theme editor

A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

Jan 2, 2022

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

 Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS Watch it on YouTube Packages we are using: flutter_svg: link get: link Flutter recently

Jun 19, 2022

XDG theme icons for Flutter

XDG theme icons for Flutter

XDG Icons XDG theme icons for Flutter. https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html TODO api cleanup docs intern

May 7, 2022

Flutter theme demo using riverpod and shared preferences

flutter_theme_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Dec 27, 2021

ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Jan 31, 2022

Easiest way to add support for light and dark theme in your flutter app.

Easiest way to add support for light and dark theme in your flutter app.

Adaptive Theme Easiest way to add support for light and dark theme in your Flutter app. It allows to manually set light or dark theme and also lets yo

Jun 29, 2022

Related

Flutter-Theme-Changer - Change theme of your app from light to dark theme and vice versa

Flutter Theme Changer - Hard Coded This is a flutter theme changer without using

Feb 13, 2022
An easy to configure sidebar widget for your flutter mobile/web apps
An easy to configure sidebar widget for your flutter mobile/web apps

flutter_sidebar An easy to configure sidebar widget for your flutter mobile/web apps See also: scaffold_responsive Usage import 'package:flutter_sideb

Dec 16, 2021
Flutter App Change Theme With Getx and Save Theme Stage with Hive
Flutter App Change Theme With Getx and Save Theme Stage with Hive

Flutter Change app Theme With GetX Flutter App Change Theme With Getx. Theme Stage saved using Hive. instead of hive you can use get-storage or shared

Feb 11, 2022
A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Jun 30, 2022
Draggable Scrollbar - A scrollbar that can be dragged for quickly navigation through a vertical list.
Draggable Scrollbar - A scrollbar that can be dragged for quickly navigation through a vertical list.

A scrollbar that can be dragged for quickly navigation through a vertical list. Additionaly it can show label next to scrollthumb with information about current item, for example date of picture created

Jun 10, 2022
A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Jun 9, 2022
Flutter plugin for building pull to refresh effects with PullToRefreshNotification and PullToRefreshContainer quickly.

pull_to_refresh_notification Language: English | 中文简体 widget to build pull to refresh effects. Web demo for PullToRefreshNotification Chinese blog pul

Jun 20, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Jan 8, 2022
Flutter qidgets - Build widgets hierarchies quickly with qidgets

Build widgets hierarchies quickly with qidgets. Quick widgets → qidgets. Feature

Mar 31, 2022
Feb 10, 2022