Flutter样式管理插件flutter_css

flutter_css_style 是一个类CSS样式的变量库，用于快速将Web CSS样式引入到Flutter应用中。它可以帮助开发者更方便地管理应用的主题和样式。

使用

1. 安装

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_css_style: <last_version>

然后运行以下命令以更新依赖：

flutter pub get

2. 创建 `StyleData` 实例

首先，创建一个或多个 StyleData 实例，并将它们注入到一个总的 StyleData 中。

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

void main() {
  // 创建一个局部样式实例
  StyleData cardStyle = StyleData({
    "card-color": Color(0xFF129892), // 卡片背景颜色
    "card-border-radius": BorderRadius.circular(16.0), // 卡片圆角半径
    "card-border-color": "app-primary-color", // 卡片边框颜色
  });

  // 创建全局样式实例，并注入局部样式
  StyleData appStyle = StyleData({
    "app-primary-color": Colors.blue.shade500, // 应用主色调
  })..inject(cardStyle);

  // 在应用中使用 StaticStyle 包裹 MaterialApp
  runApp(MyApp(style: appStyle));
}

class MyApp extends StatelessWidget {
  final StyleData style;

  const MyApp({Key? key, required this.style}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StaticStyle(
      style: style,
      child: MaterialApp(
        title: 'Flutter CSS Style Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

3. 调用样式

通过 Style.of(context) 获取当前的样式，并调用样式变量。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Style.of(context);

    // 获取卡片背景颜色
    final cardColor = style.get<Color>("card-color");

    // 获取卡片边框颜色
    final cardBorderColor = style.get<Color>("card-border-color");

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter CSS Style Demo'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            color: cardColor,
            borderRadius: style.get<BorderRadius>("card-border-radius"),
            border: Border.all(color: cardBorderColor),
          ),
          child: Center(child: Text('Card')),
        ),
      ),
    );
  }
}

更多关于Flutter样式管理插件flutter_css_style的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter样式管理插件flutter_css_style的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_css_style 是一个用于在 Flutter 中管理和应用 CSS 样式表的插件。它允许开发者使用类似于 CSS 的语法来定义和应用样式，从而简化样式的管理和复用。以下是如何使用 flutter_css_style 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_css_style 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_css_style: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建 CSS 样式表

你可以创建一个 .css 文件来定义样式。例如，创建一个名为 styles.css 的文件：

/* styles.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
}

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
}

3. 加载 CSS 样式表

在 Flutter 应用中加载并解析 CSS 样式表：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 加载 CSS 文件
  final cssStyle = await CssStyle.loadFromAsset('assets/styles.css');
  
  runApp(MyApp(cssStyle: cssStyle));
}

class MyApp extends StatelessWidget {
  final CssStyle cssStyle;

  MyApp({required this.cssStyle});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(cssStyle: cssStyle),
    );
  }
}

4. 应用 CSS 样式

在 MyHomePage 中，使用 cssStyle.apply 方法来应用样式：

class MyHomePage extends StatelessWidget {
  final CssStyle cssStyle;

  MyHomePage({required this.cssStyle});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter CSS Style Example'),
      ),
      body: Container(
        child: Column(
          children: [
            // 应用 .container 样式
            cssStyle.apply(
              className: 'container',
              child: Column(
                children: [
                  // 应用 .title 样式
                  cssStyle.apply(
                    className: 'title',
                    child: Text('Hello, Flutter CSS Style!'),
                  ),
                  SizedBox(height: 20),
                  // 应用 .button 样式
                  cssStyle.apply(
                    className: 'button',
                    child: TextButton(
                      onPressed: () {},
                      child: Text('Click Me'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter样式管理插件flutter_css_style的使用

使用