Flutter样式框架插件flailwind的使用
Flutter样式框架插件flailwind的使用
Flailwind
flailwind 是一个在 Flutter 中实现类似 Tailwind 风格的样式框架插件，通过文本样式和颜色来应用样式。
文本样式
文本样式的应用与 Tailwind 类似。以下是一些基本的示例：
Text('my fancy header', style: context.h1.thin.wide.primary.underline)
基础文本样式
Text('header 1', style: context.h1)
Text('header 2', style: context.h2)
Text('header 3', style: context.h3)
Text('paragraph', style: context.p)
// 加粗或斜体
Text('style with bold', style: context.p.italic)
Text('style with italic', style: context.p.bold)
// 文本装饰
Text('underline', style: context.p.underline),
Text('lineThrough', style: context.p.lineThrough),
// 字符间距
Text('extra tight', style: context.p.extraTight),
Text('tight', style: context.p.tight)
Text('wide', style: context.p.wide)
Text('extra wide', style: context.p.extraWide)
// 字重
Text('thin', style: context.p.thin),
Text('bold', style: context.p.bold),
// 字号
Text('small', style: context.p.sm),
Text('medium', style: context.p.md),
Text('large', style: context.p.lg),
Text('xl', style: context.p.xl),
Text('2xl', style: context.p.xxl),
Text('3xl', style: context.p.xxxl),
// 溢出处理
Text('clip', style: context.p.clip),
Text('ellipsis', style: context.p.ellipsis),
Text('fade', style: context.p.fade),
Text('visible', style: context.p.visible),
// 文本颜色
Text('primary', style: context.p.primary),
Text('secondary', style: context.p.secondary),
Text('tertiary', style: context.p.tertiary),
Text('error', style: context.p.error),
Text('onPrimary', style: context.p.onPrimary),
Text('onSecondary', style: context.p.onSecondary),
Text('onTertiary', style: context.p.onTertiary),
Text('onError', style: context.p.onError),
// 背景颜色
Text('bgPrimary', style: context.p.bgPrimary),
Text('bgSecondary', style: context.p.bgSecondary),
Text('bgError', style: context.p.bgError),
Text('bgTertiary', style: context.p.bgTertiary),
颜色
flailwind 提供了更简便的方式来访问常见的颜色。
Card(child: child, color: context.primary)
Card(child: child, color: context.secondary)
Card(child: child, color: context.tertiary)
Card(child: child, color: context.error)
Card(child: child, color: context.onPrimary)
Card(child: child, color: context.onSecondary)
Card(child: child, color: context.onTertiary)
Card(child: child, color: context.onError)
Card(child: child, color: context.bgPrimary)
Card(child: child, color: context.bgSecondary)
Card(child: child, color: context.bgTertiary)
Card(child: child, color: context.bgError)
完整示例
下面是完整的示例代码，展示了如何使用 flailwind 插件进行样式设置。
import 'package:flailwind/flailwind.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: ExamplePage()));
class ExamplePage extends StatelessWidget {
const ExamplePage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return const Scaffold(
body: Row(
children: [
Expanded(child: BaseStyles()),
Expanded(child: ColorStyles()),
],
),
);
}
}
class BaseStyles extends StatelessWidget {
const BaseStyles({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: [
Text('header 1', style: context.h1),
Text('header 2', style: context.h2),
Text('header 3', style: context.h3),
Text('paragraph', style: context.p),
const Divider(),
Text('h1.bold', style: context.h1.bold),
Text('h2.bold', style: context.h2.bold),
Text('h3.bold', style: context.h3.bold),
Text('p.bold', style: context.p.bold),
const Divider(),
Text('h1.italic', style: context.h1.italic),
Text('h2.italic', style: context.h2.italic),
Text('h3.italic', style: context.h3.italic),
Text('p.italic', style: context.p.italic),
const Divider(),
Text('h1.bold/italic', style: context.h1.bold.italic),
Text('h2.bold/italic', style: context.h2.bold.italic),
Text('h3.bold/italic', style: context.h3.bold.italic),
Text('p.bold/italic', style: context.p.bold.italic),
const Divider(),
Text('h1.underline', style: context.h1.underline),
Text('h2.underline', style: context.h2.underline),
Text('h3.underline', style: context.h3.underline),
Text('p.underline', style: context.p.underline),
const Divider(),
Text('h1.lineThrough', style: context.h1.lineThrough),
Text('h2.lineThrough', style: context.h2.lineThrough),
Text('h3.lineThrough', style: context.h3.lineThrough),
Text('p.lineThrough', style: context.p.lineThrough),
const Divider(),
Text('h1.wide', style: context.h1.wide),
Text('h2.wide', style: context.h2.wide),
Text('h3.wide', style: context.h3.wide),
Text('p.wide', style: context.p.wide),
const Divider(),
Text('h1.tight', style: context.h1.tight),
Text('h2.tight', style: context.h2.tight),
Text('h3.tight', style: context.h3.tight),
Text('p.tight', style: context.p.tight),
const Divider(),
Text('p.size3xl', style: context.p.xxxl),
Text('p.size2xl', style: context.p.xxl),
Text('p.sizeXl', style: context.p.xl),
Text('p.sizeLg', style: context.p.lg),
Text('p.sizeMd', style: context.p.md),
Text('p.sizeSm', style: context.p.sm),
],
);
}
}
class ColorStyles extends StatelessWidget {
const ColorStyles({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: [
Text('h1.primary', style: context.h1.primary),
Text('h1.primary', style: context.h1.primary),
Text('h2.primary', style: context.h2.primary),
Text('h3.primary', style: context.h3.primary),
Text('p.primary', style: context.p.primary),
const Divider(),
Text('h1.secondary', style: context.h1.secondary),
Text('h2.secondary', style: context.h2.secondary),
Text('h3.secondary', style: context.h3.secondary),
Text('p.secondary', style: context.p.secondary),
const Divider(),
Text('h1.tertiary', style: context.h1.tertiary),
Text('h2.tertiary', style: context.h2.tertiary),
Text('h3.tertiary', style: context.h3.tertiary),
Text('p.tertiary', style: context.p.tertiary),
const Divider(),
Text('h1.error', style: context.h1.error),
Text('h2.error', style: context.h2.error),
Text('h3.error', style: context.h3.error),
Text('p.error', style: context.p.error),
const Divider(),
Text('h1.onPrimary.bgPrimary', style: context.h1.onPrimary.bgPrimary),
Text('h2.onPrimary.bgPrimary', style: context.h2.onPrimary.bgPrimary),
Text('h3.onPrimary.bgPrimary', style: context.h3.onPrimary.bgPrimary),
Text('p.onPrimary.bgPrimary', style: context.p.onPrimary.bgPrimary),
const Divider(),
Text('h1.onSecondary.bgSecondary',
style: context.h1.onSecondary.bgSecondary),
Text('h2.onSecondary.bgSecondary',
style: context.h2.onSecondary.bgSecondary),
Text('h3.onSecondary.bgSecondary',
style: context.h3.onSecondary.bgSecondary),
Text('p.onSecondary.bgSecondary',
style: context.p.onSecondary.bgSecondary),
const Divider(),
Text('h1.onTertiary.bgTertiary',
style: context.h1.onTertiary.bgTertiary),
Text('h2.onTertiary.bgTertiary',
style: context.h2.onTertiary.bgTertiary),
Text('h3.onTertiary.bgTertiary',
style: context.h3.onTertiary.bgTertiary),
Text('p.onTertiary.bgTertiary', style: context.p.onTertiary.bgTertiary),
const Divider(),
Text('h1.onError.bgError', style: context.h1.onError.bgError),
Text('h2.onError.bgError', style: context.h2.onError.bgError),
Text('h3.onError.bgError', style: context.h3.onError.bgError),
Text('p.onError.bgError', style: context.p.onError.bgError),
const Divider(),
],
);
}
}
更多关于Flutter样式框架插件flailwind的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter样式框架插件flailwind的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flailwind 是一个基于 Tailwind CSS 的 Flutter 样式框架插件。它允许开发者使用类似 Tailwind CSS 的语法来定义 Flutter 应用的样式，从而简化样式的编写和管理。flailwind 提供了一套预定义的实用类，使得开发者可以快速构建响应式、一致的用户界面。
1. 安装 flailwind
首先，你需要在 pubspec.yaml 文件中添加 flailwind 依赖：
dependencies:
flailwind: ^latest_version
然后运行 flutter pub get 来安装依赖。
2. 使用 flailwind
flailwind 提供了许多预定义的实用类，如颜色、间距、字体大小、边框等。你可以在 Widget 中直接使用这些类来定义样式。
2.1 颜色
flailwind 提供了丰富的颜色类，例如：
import 'package:flailwind/flailwind.dart';
Text(
'Hello, Flailwind!',
style: TextStyle(
color: FlailwindColors.red500,
),
);
2.2 间距
你可以使用 flailwind 的间距类来定义 padding 和 margin：
Container(
padding: EdgeInsets.all(FlailwindSpacing.p4),
margin: EdgeInsets.symmetric(horizontal: FlailwindSpacing.p2),
color: FlailwindColors.blue500,
child: Text('Padded and Margined Container'),
);
2.3 字体大小
flailwind 提供了一系列的字体大小类：
Text(
'Large Text',
style: TextStyle(
fontSize: FlailwindFontSize.textXl,
),
);
2.4 边框
你可以使用 flailwind 的边框类来定义边框样式：
Container(
decoration: BoxDecoration(
border: Border.all(
color: FlailwindColors.gray300,
width: FlailwindBorderWidth.border,
),
borderRadius: BorderRadius.circular(FlailwindBorderRadius.roundedMd),
),
child: Text('Bordered Container'),
);
3. 响应式设计
flailwind 也支持响应式设计，你可以为不同的屏幕尺寸定义不同的样式：
Container(
padding: EdgeInsets.all(FlailwindResponsive.spacing(
sm: FlailwindSpacing.p2,
md: FlailwindSpacing.p4,
lg: FlailwindSpacing.p6,
)),
child: Text('Responsive Padding'),
);
4. 自定义配置
你还可以通过自定义 flailwind 的配置来适配你的项目需求。例如，你可以自定义颜色、间距、字体大小等：
final customFlailwind = Flailwind(
colors: FlailwindColors(
primary: Colors.blue,
secondary: Colors.green,
),
spacing: FlailwindSpacing(
p1: 4.0,
p2: 8.0,
p3: 12.0,
),
fontSize: FlailwindFontSize(
textSm: 12.0,
textMd: 16.0,
textLg: 20.0,
),
);
Text(
'Custom Flailwind',
style: TextStyle(
fontSize: customFlailwind.fontSize.textMd,
color: customFlailwind.colors.primary,
),
);