Quickly configure three theme styles

Related tags

Templates flytheme
Overview

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,
        ));
  }
}
You might also like...

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

TRTCFlutterDemo - With TRTC, you can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services

TRTCFlutterDemo - With TRTC, you can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services

This document describes how to quickly run the TRTC demo for Flutter. Environmen

Feb 10, 2022

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.

Oct 24, 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

Sep 22, 2022

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

Sep 27, 2022

Customizable ScrollBar for quickly navigation.

Customizable ScrollBar for quickly navigation.

material_scrollbar This package provides customizable scrollbar for your widget and easy to implement with the few lines of code. Material Scrollbar.

Jul 27, 2022

App to quickly view the word by word meaning of an ayat

App to quickly view the word by word meaning of an ayat

quran_ayat_app_flutter App to quickly view the word by word meaning of an ayat Click here to access online Features Supports platforms like android, i

May 13, 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
Owner
CUMT-Atom
CUMT-Atom
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

Shametha K G 4 Oct 17, 2022
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

Tushar Sadhwani 15 Sep 27, 2022
A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready.

Package Rename A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready. Package Rename handles changing 30 fields

OutdatedGuy 3 Aug 24, 2022
This Country Selector UI Library written by Dart and Fluter and supports three locales with country's name, achieves lazy loading, and country card animation on listview

Country Selector Widget This Country Selector Widget UI Library written by Dart and Fluter and supports three locales with country's name, achieves la

Klaus 6 Nov 15, 2022
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

Azraf Al Monzim 12 Oct 22, 2022
📐 It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@displaykit/responsive_styles You don't need to be worried just because you have to support multiple screens ?? ?? ?? ?? . It's a set of common utilit

DisplayKit Tech 42 Dec 16, 2022
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

Fliggy Mobile 481 Dec 29, 2022
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

Flutter Community 425 Dec 10, 2022
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

Fliggy Mobile 481 Dec 29, 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

FlutterCandies 165 Dec 28, 2022