Flutter教程GetX实现动态主题圆角

在Flutter中使用GetX实现动态主题时，如何同时自定义圆角样式？我按照官方文档切换主题颜色成功了，但发现AppBar、按钮等控件的圆角会随主题重置为默认值。想请教：

  1. 如何在GetX的ThemeData里统一配置全局圆角尺寸？
  2. 能否根据不同主题设置不同的圆角参数？
  3. 如果通过Obx动态更新圆角，会不会影响性能？

目前我的圆角设置代码和主题切换代码总是相互冲突。

3 回复

首先在GetX中创建一个ThemeController来管理主题和圆角：

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

class ThemeController extends GetxController {
  var isDarkTheme = false.obs;
  var borderRadius = 16.0.obs;

  void toggleTheme() => isDarkTheme.toggle();
  void changeBorderRadius(double value) => borderRadius.value = value;
}

然后在main函数中初始化并设置路由：

void main() {
  runApp(GetMaterialApp(
    initialRoute: '/',
    getPages: [
      GetPage(name: '/', page: () => HomePage()),
    ],
  ));
}

在HomePage中使用GetX来动态更新UI：

class HomePage extends StatelessWidget {
  final themeCtrl = Get.put(ThemeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX 动态主题与圆角')),
      body: Center(
        child: Obx(() => Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: themeCtrl.isDarkTheme ? Colors.black : Colors.white,
            borderRadius: BorderRadius.circular(themeCtrl.borderRadius.value),
            border: Border.all(color: Colors.grey)
          ),
          child: Center(child: Text('Hello GetX', style: TextStyle(color: Colors.red))),
        )),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(onPressed: () => themeCtrl.toggleTheme(), child: Icon(Icons.brightness_4)),
          SizedBox(width: 10),
          FloatingActionButton(onPressed: () => themeCtrl.changeBorderRadius(50), child: Icon(Icons.circle)),
        ],
      ),
    );
  }
}

运行程序可以看到主题和圆角随着按钮点击动态变化。

更多关于Flutter教程GetX实现动态主题圆角的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用GetX来实现动态主题和圆角效果非常简单。首先确保你已添加get依赖到pubspec.yaml中。

  1. 设置动态主题：创建一个ThemeManager类管理主题状态。
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ThemeManager extends GetxController {
  var isDarkMode = false.obs;

  void toggleTheme() {
    isDarkMode.value = !isDarkMode.value;
  }
}
  1. 构建带有圆角的Widget：可以使用Container配合BorderRadius。
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(16),
    color: Get.find<ThemeManager>().isDarkMode.value ? Colors.grey[800] : Colors.white,
  ),
  child: Text("Hello GetX"),
)
  1. 切换主题按钮：
GetBuilder<ThemeManager>(
  builder: (_) => ElevatedButton(
    onPressed: () => Get.find<ThemeManager>().toggleTheme(),
    child: Text(_.isDarkMode ? "Light Mode" : "Dark Mode"),
  ),
)

这样就完成了动态主题与圆角的结合，通过Obx或GetBuilder监听状态变化并更新UI。

Flutter GetX实现动态主题圆角教程

使用GetX管理动态主题并实现圆角效果非常简单，下面是一个完整示例：

1. 创建主题控制器

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

class ThemeController extends GetxController {
  var borderRadius = 8.0.obs;
  var primaryColor = Colors.blue.obs;

  void changeBorderRadius(double value) {
    borderRadius.value = value;
  }

  void changePrimaryColor(Color color) {
    primaryColor.value = color;
  }
}

2. 在main.dart中初始化控制器

void main() {
  Get.put(ThemeController());
  runApp(MyApp());
}

3. 创建响应式主题的MaterialApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();
    
    return Obx(() => MaterialApp(
      theme: ThemeData(
        primaryColor: themeController.primaryColor.value,
        cardTheme: CardTheme(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(themeController.borderRadius.value),
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(themeController.borderRadius.value),
            ),
          ),
        ),
      ),
      home: HomePage(),
    ));
  }
}

4. 在页面中使用和修改主题

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();
    
    return Scaffold(
      appBar: AppBar(title: Text('动态主题圆角')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Card(
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Text('这是响应式圆角的Card'),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('圆角按钮'),
            ),
            SizedBox(height: 20),
            Slider(
              value: themeController.borderRadius.value,
              min: 0,
              max: 30,
              onChanged: themeController.changeBorderRadius,
            ),
            ElevatedButton(
              onPressed: () => themeController.changePrimaryColor(
                Colors.primaries[Random().nextInt(Colors.primaries.length)],
              ),
              child: Text('随机更改主题色'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用GetX管理动态主题和圆角半径：

  1. 创建了可观察的主题控制器
  2. 整个应用响应主题变化
  3. 提供了滑块调整圆角大小
  4. 提供了按钮随机更改主题色

所有组件都会自动响应这些变化，无需手动重建UI。

回到顶部