Flutter自定义按钮插件button_customize的使用
Flutter自定义按钮插件button_customize的使用
本项目是一个新的Flutter插件项目，旨在提供一个包含Android和/或iOS平台特定实现代码的专门包。
获取开始
要开始使用这个插件，请先确保你已经安装了Flutter。如果还没有安装，可以参考官方文档，里面有详细的教程、示例和移动开发指南。
使用button_customize插件
在下面的示例代码中，我们将展示如何使用button_customize插件来创建不同样式的按钮。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:button_customize/button_customize.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isLoading = false;
[@override](/user/override)
void initState() {
super.initState();
}
[@override](/user/override)
void dispose() {
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Button Customize Example'),
),
body: SingleChildScrollView(
child: Column(
children: [
// 第一部分：带标题和图标的按钮
ExpansionTile(
title: const Text('标题和图标'),
children: <Widget>[
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
title: "点击我!",
backgroundColor: Colors.orange,
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
title: "点击我!",
backgroundColor: Colors.green[50],
titleTextStyle: const TextStyle(color: Colors.orange),
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
title: "点击我!",
backgroundColor: Colors.blue,
titleTextStyle: const TextStyle(color: Colors.white),
loadingColor: Colors.brown,
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
title: "点击我!",
borderRadius: BorderRadius.circular(8),
icon: const Icon(Icons.favorite, size: 16,),
iconPosition: IconPosition.left,
loadingColor: Colors.pink,
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
title: "点击我!",
icon: const Icon(Icons.favorite, color: Colors.green,),
iconPosition: IconPosition.right,
loadingColor: Colors.cyan,
onTap: (){},
),
),
],
),
// 第二部分：自定义标题小部件和图标的按钮
ExpansionTile(
title: const Text('自定义标题小部件和图标'),
children: <Widget>[
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
backgroundColor: Colors.blueGrey,
titleWidget: Text.rich(
TextSpan(
children: [
const TextSpan(text: "演示."),
const TextSpan(text: " "),
TextSpan(
text: "点击我!",
style: const TextStyle(decoration: TextDecoration.underline,),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint('点击了');
}
)
],
),
),
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
backgroundColor: Colors.brown,
height: 60,
titleWidget: const Text.rich(
TextSpan(
children: [
TextSpan(text: "演示."),
TextSpan(text: " "),
TextSpan(
text: "点击我!",
)
],
),
),
iconPosition: IconPosition.left,
icon: const Icon(Icons.star),
onTap: (){},
),
),
ListTile(
title: ButtonCustomizeWidget(
isLoading: _isLoading,
titleWidget: const Text.rich(
TextSpan(
children: [
TextSpan(text: "演示."),
TextSpan(text: " "),
TextSpan(
text: "点击我!",
)
],
),
),
iconPosition: IconPosition.right,
icon: const Icon(Icons.star),
loadingWidget: FlutterLogo(size: 20),
onTap: (){},
),
),
],
),
// 第三部分：只有图标的按钮
ExpansionTile(
title: const Text('只有图标'),
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
ButtonCustomizeWidget(
isLoading: _isLoading,
backgroundColor: Colors.grey[200],
icon: const Icon(Icons.star, color: Colors.amber,),
onTap: (){},
),
const SizedBox(width: 16,),
ButtonCustomizeWidget(
isLoading: _isLoading,
icon: const Icon(Icons.info),
loadingColor: Colors.orange,
onTap: (){
setState(() {
_isLoading = false;
});
},
),
const SizedBox(width: 16,),
ButtonCustomizeWidget(
isLoading: _isLoading,
width: 44,
borderRadius: BorderRadius.circular(8),
icon: const Icon(Icons.info),
onTap: (){
setState(() {
_isLoading = true;
});
},
)
],
),
),
),
const SizedBox(height: 16,),
Center(
child: ButtonCustomizeWidget(
isLoading: _isLoading,
icon: const Icon(Icons.info),
loadingColor: Colors.orange,
iconPosition: IconPosition.center,
onTap: (){
setState(() {
_isLoading = false;
});
},
),
)
],
),
const SizedBox(height: 32,),
],
),
),
),
);
}
}
更多关于Flutter自定义按钮插件button_customize的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
