Flutter CSS单位转换插件css_units的使用

Flutter CSS单位转换插件css_units的使用

标题

CSS Units

内容

添加一个用于转换CSS视口单位（vmin, vmax, vw, vh, rem）的转换器。

描述

方便地设置尺寸相对于屏幕或LayoutBuilders BoxConstraints。

示例代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    CssViewportUnits.initContextSizes(context);
    return const MaterialApp(
      title: 'Example app for css_units package',
      debugShowCheckedModeBanner: false,
      home: MyAppContent(),
    );
  }
}

class MyAppContent extends StatelessWidget {
  const MyAppContent({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化上下文大小
    CssViewportUnits.initContextSizes(context);

    return Scaffold(
      appBar: AppBar(title: const Text("Example css_units package")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 6.vmin,
              child: Text(
                '60 vmin width',
                style: TextStyle(fontSize: 5.vmin),
              ),
            ),
            Container(
              alignment: Alignment.center,
              width: 60.vmin,
              height: 60.vmin,
              margin: EdgeInsets.all(11.vmin), // 注意：这里的间距应该是11.vmin，而不是1.vmin
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(11.vmin), // 注意：这里的半径应该是11.vmin，而不是1.vmin
              ),
              child: Text(
                "Text 2 rem",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 2.rem,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(height: 6.v.min), // 注意：这里的间距应该是6.v.min，而不是6.vmin
          ],
        ),
      ),
    );
  }
}

使用说明

注意！在使用相对尺寸之前，你应该总是调用CssViewportUnits.initContextSizes(context);。

特性

• 可读性！

安装

更改pubspec.yaml（并运行隐式pub get）：

dependencies:
  css_units: <latest_version>

或者从GitHub获取最新版本：

dependencies:
  css_units:
    git:
      url: https://github.com/devmaslove/css_units

示例演示

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    CssViewportUnits.initContextSizes(context);
    return const MaterialApp(
      title: 'Example app for css_units package',
      debugShowCheckedModeBanner: false,
      home: MyAppContent(),
    );
  }
}

class MyAppContent extends StatelessWidget {
  const MyAppContent({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化上下文大小
    CssViewportUnits.initContextSizes(context);

    return Scaffold(
      appBar: AppBar(title: const Text("Example css_units package")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 6.v.min, // 细节调整为6.v.min
              child: Text(
                '60 vmin width',
                style: TextStyle(fontSize: 5.v.min), // 细节调整为5.v.min
              ),
            ),
            Container(
              alignment: Alignment.center,
              width: 60.v.min, // 细节调整为60.v.min
              height: 60.v.min, // 细节调整为60.v.min
              margin: EdgeInsets.all(11.v.min), // 细节调整为11.v.min
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(11.v.min), // 细节调整为11.v.min
              ),
              child: Text(
                "Text 2 rem",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 2.rem, // 细节调整为2.rem
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(height: 6.v.min), // 细节调整为6.v.min
          ],
        ),
      ),
    );
  }
}