flutter getx 更改主题颜色

最新推荐文章于 2024-04-05 04:11:42 发布

小红花~

最新推荐文章于 2024-04-05 04:11:42 发布

阅读量1.1k

点赞数 2

文章标签： flutter android

本文链接：https://blog.csdn.net/weixin_40570474/article/details/128789934

版权

get: ^4.6.5  # getx

入口

 return GetMaterialApp(
        title: 'Flutter Demo', theme: Themes.green, home: GetxSetting());

更改颜色 GetxSetting：

import 'package:flutter/material.dart';
// import 'package:flutter/src/foundation/key.dart';
// import 'package:flutter/src/widgets/framework.dart';
import 'package:get/get.dart';
import 'package:xindouyin/getx_change_theme/change_colors.dart';

// ignore: must_be_immutable
class GetxSetting extends StatelessWidget {
  GetxSetting({Key? key}) : super(key: key);

  List list = [
    Colors.green,
    Colors.yellow,
    Colors.red,
    Colors.black,
    Colors.white
  ];

  List colorList = [
    Themes.green,
    Themes.yellow,
    Themes.red,
    Themes.black,
    Themes.white,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor:  ,
      appBar: AppBar(
        // backgroundColor: Themes.green,
        title: const Text("这是变换的颜色"),
      ),
      body: Column(
        children: [
          const Text("这是更换主题"),
          InkWell(
            onTap: () {
              Get.changeTheme(Themes.green);
            },
            child: Container(
              color: Colors.yellow,
              height: 200,
            ),
          ),
          const Text(" 请选择您想切换的主题"),
          Expanded(
            child: ListView.builder(
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: () {
                      Get.changeTheme(colorList[index]);
                    },
                    child: Container(
                      height: 50,
                      decoration: BoxDecoration(
                        color: list[index],
                        border: const Border(
                          bottom: BorderSide(
                            width: 1,
                            color: Colors.pink,
                          ),
                        ),
                      ),
                    ),
                  );
                }),
          )
        ],
      ),
    );
  }
}

颜色类：

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

class Themes {
  static final green = ThemeData.light().copyWith(
    scaffoldBackgroundColor: Colors.green,
    appBarTheme: const AppBarTheme(
        backgroundColor: Colors.green,
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 30)),
  );

  static final yellow = ThemeData.light().copyWith(
    scaffoldBackgroundColor: Colors.yellow,
    appBarTheme: const AppBarTheme(
        systemOverlayStyle:
            //     // SystemUiOverlayStyle(statusBarBrightness: Brightness.dark),   // 这种不起效果
            SystemUiOverlayStyle.dark,
        backgroundColor: Colors.yellow,
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 30)),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.deepOrange),
      ),
    ),
  );

  static final red = ThemeData.dark().copyWith(
    scaffoldBackgroundColor: Colors.red,
    appBarTheme: const AppBarTheme(
        // foregroundColor: ,
        backgroundColor: Colors.red,
        systemOverlayStyle:
            // SystemUiOverlayStyle(statusBarBrightness: Brightness.dark),   // 这种不起效果
            SystemUiOverlayStyle.dark,
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 30)),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.brown),
      ),
    ),
  );

  static final black = ThemeData.light().copyWith(
    scaffoldBackgroundColor: Colors.black,
    appBarTheme: const AppBarTheme(
        backgroundColor: Colors.black,
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 30)),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.brown),
      ),
    ),
  );

  static final white = ThemeData.light().copyWith(
    scaffoldBackgroundColor: Colors.white,
    appBarTheme: const AppBarTheme(
        backgroundColor: Colors.white,
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 30)),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.brown),
      ),
    ),
  );
}