Flutter UI组件库插件blinc_ui_flutter的使用
Flutter UI组件库插件blinc_ui_flutter的使用
Blinc UI Flutter 提供预构建的、可直接使用的 Flutter 组件。
它包括按钮、排版、间距、装饰等。
它包括按钮、排版、间距、装饰等。
目录
安装
1. 添加依赖
在你的 pubspec.yaml 文件中添加以下内容：
dependencies:
blinc_ui_flutter: ^1.0.0
2. 安装依赖
通过命令行安装包：
$ flutter pub get
3. 导入包
在 Dart 代码中导入：
import 'package:blinc_ui_flutter/blinc_ui_flutter.dart';
使用
间距
你可以通过使用 BlincSpacer 组件轻松创建间距。你可以选择垂直或水平方向，并指定大小，从最小的 xxxxs 到最大的 huge。
SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BlincSpacer.vertical.xxs,
BlincButton(
text: "I'm a BlincUIButton",
onPressed: () {},
).largePrimary(),
BlincSpacer.vertical.xxs,
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
BlincButton(
text: 'Another Button',
onPressed: () {},
).smallPrimary(),
BlincSpacer.vertical.xxxs,
BlincButton(
text: 'Another Button',
onPressed: () {},
).smallPrimary(),
BlincSpacer.vertical.xxxs,
BlincButton(
text: 'Another Button',
onPressed: () {},
).smallPrimary(),
],
),
BlincSpacer.horizontal.xxxs,
SizedBox(
width: 180,
height: 142,
child: BlincButton(
text: 'Fluid Large Secondary',
isFluid: true,
onPressed: () {},
).largeSecondary(),
),
],
)
],
),
),
按钮
你可以使用 BlincButton 组件创建按钮。可以设置按钮的文本、样式、图标等属性。
SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BlincButton(
text: 'Large Primary',
icon: Icons.add_a_photo,
onPressed: () {},
).largePrimary(),
SizedBox(
child: BlincButton(
text: 'Large Secondary',
onPressed: () {},
).largeSecondary(),
),
BlincButton(
text: 'Large Tertiary',
onPressed: () {},
icon: Icons.location_on,
).largeTertiary(),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlincButton(
text: 'Small Primary',
icon: Icons.person_pin_circle_outlined,
onPressed: () {},
).smallPrimary(),
BlincButton(
text: 'Small Tertiary',
icon: Icons.person_pin_circle_outlined,
onPressed: () {},
isIconInverted: true,
).smallTertiary(),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlincButton(
isLoading: true,
onPressed: () {},
).smallSecondary(),
BlincButton(
isLoading: true,
onPressed: () {},
).smallPrimary(),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 220,
height: 150,
child: BlincButton(
text: 'Fluid Large Primary',
isFluid: true,
onPressed: () {},
).largePrimary(),
),
Column(
children: [
SizedBox(
width: 110,
height: 60,
child: BlincButton(
text: 'Large Secondary',
isFluid: true,
onPressed: () {},
).largeSecondary(),
),
SizedBox(
width: 110,
height: 90,
child: BlincButton(
text: 'Large Tertiary',
isFluid: true,
onPressed: () {},
).largeTertiary(),
),
],
),
],
)
],
),
),
图标按钮
你可以使用 BlincIconButton 组件创建带图标的按钮。与 BlincButton 类似，可以通过属性设置不同的样式和尺寸。
SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlincIconButton(
icon: Icons.facebook,
onPressed: () {},
).iconLargePrimary(),
BlincIconButton(
onPressed: () {},
icon: Icons.whatsapp,
).iconLargeSecondary(),
BlincIconButton(
onPressed: () {},
icon: Icons.accessibility_new_sharp,
).iconLargeTertiary(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlincIconButton(
onPressed: () {},
icon: Icons.arrow_back_ios_new,
).iconSmallPrimary(),
BlincIconButton(
onPressed: () {},
icon: Icons.subdirectory_arrow_left_sharp,
).iconSmallSecondary(),
BlincIconButton(
onPressed: () {},
icon: Icons.arrow_forward_ios,
).iconSmallTertiary(),
],
),
]
),
),
阴影
BlincShadow 组件为 Container 创建预定义的阴影样式。有多种阴影大小可供选择。
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BlincSpacer.vertical.lg,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
block(BlincShadow.zero, 'zero'),
block(BlincShadow.sm, 'sm')
],
),
BlincSpacer.vertical.md,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
block(BlincShadow.md, 'md'),
block(BlincShadow.lg, 'lg')
],
),
BlincSpacer.vertical.md,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
block(BlincShadow.xl, 'xl'),
block(BlincShadow.huge, 'huge')
],
),
],
),
),
Widget block(BoxShadow blincShadow, String size) {
return SizedBox(
width: 150,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('BlincShadow.$size'),
BlincSpacer.vertical.xxs,
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 227, 227, 225),
boxShadow: [
blincShadow,
],
),
),
],
),
);
}
边框
BlincBorders 组件为 Container 的 BoxDecoration 创建预定义的边框样式。可用的边框样式包括无边框、细边框、中等边框和粗边框。
SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
block(BlincBorders.zero, 'zero'),
block(BlincBorders.sm, 'sm'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
block(BlincBorders.md, 'md'),
block(BlincBorders.lg, 'lg'),
],
),
],
),
),
Widget block(BoxBorder blincBorder, String size) {
return Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('BlincBorders.$size'),
const SizedBox(height: 15),
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 242, 242, 239),
border: blincBorder,
),
),
],
),
);
}
应用颜色
AppColors 是一个提供通用颜色调色板的类。可以通过静态方法访问这些颜色。
SafeArea(
child: SizedBox(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
block(
context,
width: 50,
height: MediaQuery.of(context).size.height,
color: AppColors.colorBlueInfo_200,
),
BlincSpacer.horizontal.xxs,
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
BlincSpacer.vertical.xxxs,
block(
context,
width: 280,
height: 90,
color: AppColors.colorBlueSecondary,
),
BlincSpacer.vertical.xs,
block(
context,
width: 280,
height: 90,
color: AppColors.colorBlueSecondary,
),
BlincSpacer.vertical.sm,
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
block(
context,
width: 80,
height: 250,
color: AppColors.colorNeutral_600,
),
BlincSpacer.horizontal.xxs,
Column(
children: [
BlincSpacer.vertical.sm,
block(
context,
width: 180,
height: 218,
color: AppColors.colorOrangePrimary,
),
],
),
],
),
BlincSpacer.vertical.xs,
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
block(
context,
width: 180,
height: 50,
color: AppColors.colorGreenSecondary,
),
BlincSpacer.horizontal.xxs,
block(
context,
width: 80,
height: 50,
color: AppColors.colorOrangeAlert_300,
),
],
),
],
),
],
),
),
),
Widget block(
context, {
required double width,
required double height,
required Color color,
}) {
return Container(
width: width,
height: height,
color: color,
);
}
进度条
BlincProgressBar 组件用于创建进度条。可以设置进度值和主题风格。
BlincProgressBar(
value: 0.1, // 10%
dark: isDarkMode,
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 35.0),
child: Container(
alignment: Alignment.center,
child: SizedBox(
width: 350,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
'Dark Mode',
style: TextStyle(
color: isDarkMode
? AppColors.colorNeutral_0
: AppColors.colorNeutral_900,
),
),
Switch(
value: isDarkMode,
onChanged: ((value) {
setState(() {
isDarkMode = !isDarkMode;
});
}),
),
],
),
BlincSpacer.vertical.xxs,
BlincLogo(
logoTheme:
isDarkMode ? LogoTheme.white : LogoTheme.standard,
),
BlincSpacer.vertical.xs,
BlincProgressBar(
value: value,
dark: isDarkMode,
),
],
),
),
),
),
),
),
排版
BlincText 组件用于创建文本，并可以通过一系列方法自定义其样式。
SafeArea(
child: ListView(
padding: const EdgeInsets.all(8.0),
children: [
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightThin.heightXXS.sizeXXXS,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightLight.heightXS.sizeXS,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightRegular.heightSM.sizeMD,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightMedium.heightMD.sizeLG,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightSemiBold.heightXXL.sizeHuge,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightExtraBold.heightHuge.sizeXHuge,
BlincSpacer.vertical.xxs,
BlincText('Proxima Nova').weightBlack.heightXHuge.sizeXXHuge,
],
),
),
输入
BlincInputComponent 可以创建表单和输入字段，并具有预构建的验证功能。要使用它，必须将 BlincInputComponent.input 包裹在 BlincInputComponent.form 中。
class InputExample extends StatelessWidget {
InputExample({Key? key}) : super(key: key);
final _globalKey = GlobalKey<FormState>();
void _validateForm() {
_globalKey.currentState?.validate();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black87,
title: const Text('Input component example'),
),
body: SafeArea(
child: BlincInputComponent.form(
globalKey: _globalKey,
child: Container(
alignment: Alignment.center,
child: SizedBox(
width: 400,
child: ListView(
padding: const EdgeInsets.all(8.0),
children: [
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
obscureText: true,
label: 'Label',
descriptionText: 'Common Input',
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
placeholder: 'My Placeholder',
descriptionText: 'Input with placeholder',
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
placeholder: 'Placeholder',
descriptionText: 'Input with placeholder and default text',
textEditingController: TextEditingController(text: 'Default Text'),
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
placeholder: 'Placeholder',
descriptionText: 'Disabled Input',
textEditingController: TextEditingController(text: 'Input'),
enabled: false,
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
placeholder: 'Placeholder',
descriptionText: 'Required field',
validator: BlincInputComponent.validations.required,
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
descriptionText: 'Field with suffixIcon',
suffixIcon: Icons.remove_red_eye_outlined,
),
BlincSpacer.vertical.xxs,
BlincInputComponent.textField(
label: 'Label',
descriptionText: 'Field with both icons',
suffixIcon: Icons.remove_red_eye_outlined,
prefixIcon: Icons.phone_outlined,
),
],
),
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _validateForm,
child: const Icon(Icons.send),
),
);
}
}
更多关于Flutter UI组件库插件blinc_ui_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter UI组件库插件blinc_ui_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
blinc_ui_flutter 是一个为 Flutter 应用提供 UI 组件的插件，旨在简化开发流程并提供一致的 UI 设计。要使用这个插件，你需要按照以下步骤进行配置和使用。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 blinc_ui_flutter 作为依赖项。
dependencies:
flutter:
sdk: flutter
blinc_ui_flutter: ^版本号
请将 ^版本号 替换为 blinc_ui_flutter 的最新版本号。你可以在 pub.dev 上查找最新的版本。
2. 安装依赖
在添加依赖后，运行以下命令来获取并安装依赖包：
flutter pub get
3. 导入包
在你的 Dart 文件中导入 blinc_ui_flutter 包：
import 'package:blinc_ui_flutter/blinc_ui_flutter.dart';
4. 使用组件
blinc_ui_flutter 提供了多种 UI 组件，你可以在你的应用中使用这些组件。以下是一些常见组件的使用示例：
按钮组件
BlincButton(
onPressed: () {
// 按钮点击事件
},
text: '点击我',
);
文本框组件
BlincTextField(
hintText: '请输入内容',
onChanged: (value) {
// 文本框内容变化时的回调
},
);
卡片组件
BlincCard(
child: Text('这是一个卡片'),
);
对话框组件
BlincDialog(
title: '提示',
content: '这是一个对话框',
actions: [
BlincButton(
onPressed: () {
// 关闭对话框
Navigator.of(context).pop();
},
text: '确定',
),
],
);
5. 自定义主题
blinc_ui_flutter 可能支持自定义主题，你可以通过修改主题来适配你的应用设计。通常在 MaterialApp 中设置主题：
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
// 其他主题设置
),
home: MyHomePage(),
);
6. 运行应用
完成上述步骤后，你可以运行你的 Flutter 应用并查看 blinc_ui_flutter 组件的效果。
flutter run