Flutter自定义按钮组件插件miv_buttons的使用
Flutter自定义按钮组件插件miv_buttons的使用
插件介绍
miv_buttons 是一个可定制的按钮组件插件，适用于Flutter。它提供了灵活的布局、样式和浮雕选项，允许你创建高度可定制的按钮，包括自定义颜色、填充、边框半径、背景颜色等。
示例代码
下面是一个完整的示例代码，展示了如何在Flutter应用中使用miv_buttons插件来创建各种类型的自定义按钮。
import 'package:flutter/material.dart';
import 'package:miv_buttons/button.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'miv_buttons demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const DemoPage(),
);
}
}
class DemoPage extends StatelessWidget {
const DemoPage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('miv_buttons examples'),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Button.labelIcon(
onClick: () async {
if (!await launchUrl(
Uri.parse('https://github.com/mivoligo/miv_buttons'),
)) {
throw Exception('Could not open the page');
}
},
icon: Icons.open_in_new,
label: 'Project Website',
foregroundColor: Colors.white,
elevation: 2,
pressedElevation: 0,
),
),
],
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const Text(
'Click a button to play with it\'s main properties',
style: TextStyle(fontSize: 18),
),
const SizedBox(height: 48),
Column(
children: [
Button.label(
onClick: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ButtonLabelPage();
},
),
);
},
label: 'PRESS ME!',
color: Colors.redAccent,
semanticLabel: 'open the example for Button.label',
),
const SizedBox(height: 8),
const Text('Button.label()'),
],
),
const Divider(height: 24),
Column(
children: [
Button.icon(
onClick: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ButtonIconPage();
},
),
);
},
icon: Icons.fingerprint,
color: Colors.green,
semanticLabel: 'open the example for Button.icon',
),
const SizedBox(height: 8),
const Text('Button.icon()'),
],
),
const Divider(height: 24),
Column(
children: [
Button.iconLabel(
onClick: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ButtonIconLabelPage();
},
),
);
},
icon: Icons.fingerprint,
label: 'PRESS ME',
color: Colors.amber,
semanticLabel: 'open the example for Button.iconLabel',
),
const SizedBox(height: 8),
const Text('Button.iconLabel()'),
],
),
const Divider(height: 24),
Column(
children: [
Button.labelIcon(
onClick: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ButtonLabelIconPage();
},
),
);
},
icon: Icons.fingerprint,
label: 'PRESS ME',
foregroundColor: Colors.white,
semanticLabel: 'open the example for Button.labelIcon',
),
const SizedBox(height: 8),
const Text('Button.labelIcon()'),
],
),
const Divider(height: 24),
Column(
children: [
Button(
onClick: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const ButtonPage();
},
),
);
},
color: Colors.lightGreen,
semanticLabel: 'open the example for Button',
child: const Column(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.sunny),
Icon(Icons.access_alarms),
],
),
Text('PRESS ME!'),
Icon(Icons.add),
],
),
),
const SizedBox(height: 8),
const Text('Button()'),
],
),
],
),
),
),
);
}
}
更多关于Flutter自定义按钮组件插件miv_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义按钮组件插件miv_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用自定义按钮组件插件 miv_buttons 的示例代码。假设你已经通过 pubspec.yaml 文件添加了 miv_buttons 依赖并运行了 flutter pub get 来安装它。
1. 添加依赖
首先，确保在你的 pubspec.yaml 文件中添加了 miv_buttons 依赖：
dependencies:
flutter:
sdk: flutter
miv_buttons: ^最新版本号
2. 导入并使用 miv_buttons
在你的 Dart 文件中（例如 main.dart），导入 miv_buttons 包并使用其中的自定义按钮组件。
import 'package:flutter/material.dart';
import 'package:miv_buttons/miv_buttons.dart'; // 导入miv_buttons包
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MIV Buttons Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用 MIVButton 自定义按钮
MIVButton(
buttonText: 'Custom Button',
onPressed: () {
// 按钮点击回调
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Button Pressed!')),
);
},
// 自定义按钮样式
buttonColor: Colors.green,
textColor: Colors.white,
borderRadius: 20.0,
elevation: 5.0,
shadowColor: Colors.grey.withOpacity(0.5),
),
SizedBox(height: 20),
// 使用 MIVGradientButton 渐变色按钮
MIVGradientButton(
buttonText: 'Gradient Button',
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Gradient Button Pressed!')),
);
},
// 自定义渐变色
gradientColors: [Colors.blue, Colors.purple],
borderRadius: 20.0,
elevation: 5.0,
),
],
),
),
);
}
}
3. 运行项目
确保所有代码都保存后，通过命令行运行你的 Flutter 项目：
flutter run
4. 示例说明
MIVButton是一个自定义按钮组件，你可以通过buttonText属性设置按钮文本，通过onPressed属性设置按钮点击回调。buttonColor,textColor,borderRadius,elevation, 和shadowColor等属性可以用来自定义按钮的样式。MIVGradientButton是一个带有渐变色效果的按钮组件，你可以通过gradientColors属性设置渐变色，其他属性与MIVButton类似。
这样，你就可以在 Flutter 项目中成功使用 miv_buttons 插件来创建自定义按钮组件了。如果你需要更多自定义选项，请参考 miv_buttons 的官方文档或源代码。
