Flutter UI组件库插件flutter_ui_library的使用
Flutter UI组件库插件flutter_ui_library的使用
获取开始
在本指南中，我们将介绍如何使用 flutter_ui_library 插件。该插件提供了一些常用的UI组件，如按钮（UiButton）、单选按钮（UiRadioButton）、复选框（UiCheckbox）和文本字段（UiTextField）等。
如何使用库 UiButton
以下是一个简单的示例，展示了如何使用 UiButton 组件。
// Example of usage
import 'package:flutter_ui_library/flutter_ui_library.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: '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 _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Center(
child: UiButton(
/// The callback function to be called when the button is pressed.
onPressed: () {
/// Your onTap logic here
},
title: 'Button',
/// The background color of the button.
backgroundColor: const Color(0xFFFFFFFF),
width: 150,
height: 50,
textStyle: const TextStyle(
color: Color(0xFF000000),
fontSize: 14,
fontWeight: FontWeight.normal,
),
fontColor: const Color(0xFF000000),
fontSize: 14,
fontWeight: FontWeight.normal,
/// The border radius of the button.
borderRadius: 30.0,
borderRadiusColor: const Color(0xFF000000),
disableColor: const Color(0xFFD9D9D9),
loadingIconColor: const Color(0xFFD9D9D9),
strokeWidth: 4.0,
loadingIconWidth: 0.0,
statusButton: 'loading', /// 'enable' , 'disable' , 'loading'
),
),
);
}
}
示例代码
以下是在 main.dart 文件中使用 flutter_ui_library 的完整示例：
import 'package:flutter/material.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
import 'package:flutter_ui_library/flutter_ui_library.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Storybook(
initialStory: 'UiTextField',
plugins: [
ThemeModePlugin(initialTheme: ThemeMode.light),
],
showPanel: true,
stories: [
/// ##################### Example UI Button #####################
Story(
name: 'UiButton',
builder: (context) => Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
UiButton(
title: 'Default Button',
onPressed: () {
/// Your onPressed logic here
logWarning('TODO >>> Your onPressed logic here');
},
backgroundColor: UiColors.bitterLime600,
hoverColor: UiColors.bitterLime500,
),
UiButton(
title: 'Submit',
onPressed: () {
/// Your onPressed logic here
logWarning('TODO >>> Your onPressed logic here');
},
statusButton: 'enable',
backgroundColor: UiColors.allFbbFbb40,
hoverColor: UiColors.allFbbFbb50,
),
UiButton(
title: 'Disable',
statusButton: 'disable',
onPressed: () {
/// Your onPressed logic here
logWarning('TODO >>> Your onPressed logic here');
},
),
UiButton(
onPressed: () {
/// Your onPressed logic here
logWarning('TODO >>> Your onPressed logic here');
},
title: 'Loading',
statusButton: 'loading',
),
UiButton(
onPressed: () {
/// Your onPressed logic here
logWarning('TODO >>> Your onPressed logic here');
},
title: 'Add On',
width: 150,
height: 50,
textStyle: const TextStyle(
color: Color(0xFF000000),
fontSize: 14,
fontWeight: FontWeight.normal,
),
borderRadius: 30.0,
borderRadiusColor: const Color(0xFF000000),
disableColor: const Color(0xFFD9D9D9),
loadingIconColor: const Color.fromARGB(255, 250, 63, 12),
strokeWidth: 4.0,
loadingIconWidth: 0.0,
statusButton: 'enable', // 'enable' , 'disable' , 'loading'
backgroundColor: UiColors.primaryColor,
hoverColor: UiColors.allStarStar60,
)
],
),
),
),
),
/// ##################### Example UI RadioButton #####################
Story(
name: 'UiRadioButton',
builder: (context) => Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
UiRadioButton(
onSelected: (value) {
/// Your onPressed logic here
logWarning(
'Todo >>> Your onSelected logic here $value');
},
options: const [
{'id': 1, 'value': 'Option 1'},
{'id': 2, 'value': 'Option 2'},
{'id': 3, 'value': 'Option 3'},
],
// selectedOptionId: 1,
radioTextStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
bulletColor: Colors.green,
direction: Axis.vertical,
height: 200.0,
width: MediaQuery.of(context).size.width - 50,
paddingRadioText: const EdgeInsets.only(
left: 5, right: 20, top: 5, bottom: 8),
paddingRadio: const EdgeInsets.only(
left: 0, right: 0, top: 5, bottom: 8)),
UiRadioButton(
onSelected: (value) {
/// Your onPressed logic here
logWarning(
'Todo >>> Your onSelected logic here $value');
},
options: const [
{'id': 1, 'value': 'Option 1'},
{'id': 2, 'value': 'Option 2'},
{'id': 3, 'value': 'Option 3'},
],
selectedOptionId: 2,
radioTextStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
bulletColor: Colors.green,
direction: Axis.horizontal,
height: 200.0,
width: MediaQuery.of(context).size.width,
paddingRadioText: const EdgeInsets.only(
left: 5, right: 20, top: 5, bottom: 8),
paddingRadio: const EdgeInsets.only(
left: 0, right: 0, top: 5, bottom: 8)),
],
),
),
),
),
/// ##################### Example UI Checkbox #####################
Story(
name: 'UiCheckbox',
builder: (context) => Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
UiCheckbox(
onSelected: (value) {
logWarning('Todo >>> Your onSelected logic here $value');
},
options: const [
{'id': 1, 'value': 'Option 1', 'checked': false},
{'id': 2, 'value': 'Option 2', 'checked': false},
{'id': 3, 'value': 'Option 3', 'checked': false},
],
checkboxTextStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
bulletColor: Colors.green,
direction: Axis.vertical,
height: 200.0,
width: MediaQuery.of(context).size.width - 50,
paddingCheckboxText: const EdgeInsets.only(
left: 5, right: 20, top: 5, bottom: 8),
paddingCheckbox: const EdgeInsets.only(
left: 0, right: 0, top: 5, bottom: 8),
),
UiCheckbox(
onSelected: (value) {
/// Your onPressed logic here
logWarning(
'Todo >>> Your onSelected logic here $value');
},
options: const [
{'id': 1, 'value': 'Option 1', 'checked': false},
{'id': 2, 'value': 'Option 2', 'checked': true},
{'id': 3, 'value': 'Option 3', 'checked': false},
],
checkboxTextStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
bulletColor: Colors.green,
direction: Axis.horizontal,
height: 200.0,
width: MediaQuery.of(context).size.width,
paddingCheckboxText: const EdgeInsets.only(
left: 5, right: 20, top: 5, bottom: 8),
paddingCheckbox: const EdgeInsets.only(
left: 0, right: 0, top: 5, bottom: 8)),
],
),
),
),
),
/// ##################### Example UI TextField #####################
Story(
name: 'UiTextField',
builder: (context) => Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
UiTextField(
onChanged: (value) => {
/// Your onPressed logic here
logWarning('Todo >>> Your onSelected logic here $value')
},
),
UiTextField(
autofocus: true,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: const OutlineInputBorder(
borderSide:
BorderSide(color: UiColors.allFbbFbb60, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
onChanged: (value) => {
/// Your onPressed logic here
logWarning('Todo >>> Your onSelected logic here $value')
},
),
UiTextField(
showLoadingIcon: true,
onChanged: (value) => {
/// Your onPressed logic here
logWarning('Todo >>> Your onSelected logic here $value')
},
),
UiTextField(
showSuccessIcon: true,
onChanged: (value) => {
/// Your onPressed logic here
logWarning('Todo >>> Your onSelected logic here $value')
},
),
UiTextField(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
focusedBorder: const OutlineInputBorder(
borderSide:
BorderSide(color: UiColors.greenColor700, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
onChanged: (value) => {
/// Your onPressed logic here
logWarning('Todo >>> Your onSelected logic here $value')
},
),
],
),
),
),
),
],
);
}
}
更多关于Flutter UI组件库插件flutter_ui_library的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter UI组件库插件flutter_ui_library的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于flutter_ui_library这个Flutter UI组件库插件的使用，我们可以通过具体的代码示例来展示如何集成和使用其中的组件。需要注意的是，flutter_ui_library并非一个官方的或广泛认知的Flutter包，所以假设它是一个自定义的或者第三方库，并且它提供了一些常见的UI组件。以下是一个假设性的使用示例：
首先，确保你已经在pubspec.yaml文件中添加了flutter_ui_library依赖（假设它存在于pub.dev或者你的私有包源中）：
dependencies:
flutter:
sdk: flutter
flutter_ui_library: ^x.y.z # 替换为实际的版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Dart文件中导入flutter_ui_library并使用其中的组件。以下是一个简单的示例，展示如何使用假设的ButtonComponent和CardComponent组件：
import 'package:flutter/material.dart';
import 'package:flutter_ui_library/flutter_ui_library.dart'; // 假设的包导入路径
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter UI Library Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter UI Library Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用假设的ButtonComponent
ButtonComponent(
text: 'Click Me',
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Button Clicked!')),
);
},
),
SizedBox(height: 20),
// 使用假设的CardComponent
CardComponent(
title: 'Card Title',
description: 'This is a description of the card component.',
imageUrl: 'https://via.placeholder.com/150', // 占位图片URL
),
],
),
),
);
}
}
在这个示例中，我们假设flutter_ui_library提供了ButtonComponent和CardComponent两个组件。ButtonComponent接收一个文本和一个点击回调函数，而CardComponent接收标题、描述和图片URL。
需要注意的是，由于flutter_ui_library并非一个实际存在的广泛认知的包，上述代码中的组件和API是基于假设的。如果你使用的是某个具体的第三方库，你需要参考该库的文档来了解具体的组件和API用法。
此外，如果flutter_ui_library是一个私有的或者自定义的包，你可能需要将其源代码包含在你的项目中，并通过相对路径导入，而不是从pub.dev获取。在那种情况下，导入语句将类似于：
import 'packages/flutter_ui_library/lib/flutter_ui_library.dart'; // 假设的包本地路径
确保你的项目结构和导入路径相匹配。
