Flutter Tailwind CSS构建插件tailwindcss_build的使用
Flutter Tailwind CSS构建插件tailwindcss_build的使用
该插件是基于Tailwind CSS开发的Flutter插件。
完整示例Demo
以下是一个完整的示例代码，展示了如何使用tailwindcss_build插件来创建一个Flutter应用。此示例代码展示了如何使用各种样式和布局组件。
import 'package:flutter/material.dart';
import 'package:tailwindcss_build/tailwindcss_build.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class GradientText extends StatelessWidget {
const GradientText({
Key? key,
required this.text,
this.style,
required this.gradient,
}) : super(key: key);
final String text;
final TextStyle? style;
final Gradient gradient;
[@override](/user/override)
Widget build(BuildContext context) {
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: (bounds) => gradient.createShader(
Rect.fromLTWH(0, 0, bounds.width, bounds.height),
),
child: Text(text, style: style),
);
}
}
class _MyHomePageState extends State<MyHomePage> {
String value = "";
TwTabsController twTabsController = TwTabsController();
var selectedIndex = 0;
var tabList = ["A", "B", "C"];
[@override](/user/override)
void initState() {
super.initState();
twTabsController.addListener(() {
print(twTabsController.selectedIndex);
setState(() {
selectedIndex = twTabsController.selectedIndex;
});
});
}
[@override](/user/override)
Widget build(BuildContext context) {
var wFull = MediaQuery.of(context).size.width;
var hFull = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Div([
Div([
Select(
List.generate(
20,
(index) => Option(
label: Span("hellohellohellohellohellohellohellohello${index}")
.textClip()
.text(
color: index == int.tryParse(value) ? Colors.pink : Colors.blue,
size: 16,
)
.build(),
value: index.toString(),
),
),
value: value,
placeholder: "choose hello",
itemColor: Colors.yellow,
)
.placeholderText(color: Colors.blue, size: 16)
.onChange((v) {
setState(() {
value = v;
});
})
.asDiv()
.py(8)
.px(16)
.bg(Colors.black12)
.rounded()
.w(wFull)
.build(),
]).flex().flexRow().build(),
Div([
Span("test")
.asDiv()
.px(8)
.py(4)
.bg(Colors.blue)
.roundedBL(borderRadius: 4)
.roundedTR(borderRadius: 4)
.build(),
]).flex().flexRow().p(4).build(),
Span("Input").text2xl().fontBold().build(),
Input("", onFocus: (focusNode) {
print("focus");
}).build(),
Span("Flex").text2xl().fontBold().build(),
Span("Flex Row").textXl().fontBold().build(),
Span("Flex Row ItemsStart").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.h(100)
.flex()
.itemsStart()
.flexRow()
.bg(Colors.blue)
.build(),
Span("Flex Row ItemsCenter").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.h(100)
.flex()
.itemsCenter()
.flexRow()
.bg(Colors.blue)
.build(),
Span("Flex Row ItemsEnd").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.h(100)
.flex()
.itemsEnd()
.flexRow()
.bg(Colors.blue)
.build(),
Span("Flex Row Gap").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.h(100)
.flex()
.itemsEnd()
.flexRow()
.gap(16)
.bg(Colors.blue)
.build(),
Span("Flex Col").textXl().fontBold().build(),
Span("Flex Col ItemsStart").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.flex()
.flexCol()
.itemsStart()
.bg(Colors.blue)
.build(),
Span("Flex Col ItemsCenter").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.flex()
.flexCol()
.itemsCenter()
.bg(Colors.blue)
.build(),
Span("Flex Col ItemsEnd").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.flex()
.flexCol()
.itemsEnd()
.bg(Colors.blue)
.build(),
Span("Flex Col Gap").fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.bg(Colors.red)
.p(16)
.build()))
.flex()
.flexCol()
.itemsEnd()
.gap(16)
.bg(Colors.blue)
.build(),
Span("Grid").text2xl().fontBold().build(),
Span("Grid Base").textXl().fontBold().build(),
Div(List.generate(
4,
(index) => Span("item${index}")
.asDiv()
.boder()
.h(index == 3 ? 400 : 100)
.bg(Colors.red)
.p(16)
.build()))
.grid()
.gridCols(2)
.gap(16)
.itemsCenter()
.bg(Colors.blue)
.build(),
])
.flex()
.flexCol()
.gap(16)
.wFull()
.itemsStretch()
.overflowYAuto()
.build(),
);
}
}
1 回复
更多关于Flutter Tailwind CSS构建插件tailwindcss_build的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
tailwindcss_build 是一个用于在 Flutter 项目中集成和使用 Tailwind CSS 的插件。它允许你在 Flutter 项目中使用 Tailwind CSS 的样式，并将这些样式编译成适用于 Flutter 的 CSS 类。以下是使用 tailwindcss_build 的基本步骤：
1. 安装 tailwindcss_build
首先，你需要在你的 Flutter 项目的 pubspec.yaml 文件中添加 tailwindcss_build 作为依赖项：
dev_dependencies:
tailwindcss_build: ^0.1.0然后运行 flutter pub get 来安装依赖。
2. 配置 tailwindcss_build
在你的项目根目录下创建一个 tailwind.config.js 文件，用于配置 Tailwind CSS：
// tailwind.config.js
module.exports = {
content: [
'./lib/**/*.dart',
'./lib/**/*.html',
'./lib/**/*.js',
// Add other files that contain your Tailwind classes
],
theme: {
extend: {},
},
plugins: [],
}3. 创建 build.yaml 文件
在项目根目录下创建一个 build.yaml 文件，用于配置 tailwindcss_build：
targets:
$default:
builders:
tailwindcss_build|tailwindcss_build:
enabled: true4. 运行构建
运行以下命令来构建 Tailwind CSS 样式：
flutter pub run build_runner build这将生成一个包含 Tailwind CSS 样式的 CSS 文件，并自动将其转换为 Flutter 的 TextStyle 或其他样式类。
5. 在 Flutter 项目中使用 Tailwind CSS
在生成的代码中，你可以使用 Tailwind CSS 的样式类来设置 Flutter 小部件的样式。例如：
import 'package:flutter/material.dart';
import 'package:your_project/tailwind.dart';
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tailwind CSS in Flutter'),
),
body: Center(
child: Text(
'Hello, Tailwind CSS!',
style: Tailwind.textBase,
),
),
);
}
}