Flutter步进器列表视图插件stepper_list_view的使用
Flutter步进器列表视图插件stepper_list_view的使用
StepperListView 是一个用于构建带有步进器（stepper）小部件的列表界面的插件。它特别适用于需要根据日期和圆形头像显示信息的列表UI。
动机
这个插件的主要动机来源于作者的一个项目需求，该项目需要一个可以根据日期和圆形头像显示信息的列表UI。
作者
示例
特性
- 列表项以步进器视图展示
- 单个项目的步进器视图
- 列表项排序
- 多种选项自定义步骤UI
使用示例
以下是一个完整的示例demo，展示了如何使用 StepperListView 插件：
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:stepper_list_view/stepper_list_view.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: const MyHomePage(title: 'Stepper List Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _stepperData = List.generate(10, (index) => StepperItemData(
id: '$index',
content: ({
'name': 'Subhash Chandra Shukla',
'occupation': 'Flutter Development',
'mobileNumber': '7318459902',
'email': 'subhashchandras7318@gmail.com',
'born_date': '12\nAug',
"contact_list": {
"LinkedIn": "https://www.linkedin.com/in/subhashcs/",
"Portfolio": "https://subhashdev121.github.io/subhash/#/",
}
}),
avatar: 'https://avatars.githubusercontent.com/u/70679949?v=4',
)).toList();
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: const TextStyle(
color: Colors.white,
),
),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: StepperListView(
showStepperInLast: true,
stepperData: _stepperData,
stepAvatar: (_, data) {
final stepData = data as StepperItemData;
return PreferredSize(
preferredSize: const Size.fromRadius(20),
child: CircleAvatar(
backgroundImage: NetworkImage(
stepData.avatar!,
),
),
);
},
stepWidget: (_, data) {
final stepData = data as StepperItemData;
return PreferredSize(
preferredSize: const Size.fromWidth(30),
child: Text(
stepData.content['born_date'] ?? '',
style: TextStyle(
color: theme.primaryColor,
fontSize: 13,
),
textAlign: TextAlign.center,
),
);
},
stepContentWidget: (_, data) {
final stepData = data as StepperItemData;
return Container(
margin: const EdgeInsets.only(
top: 20,
),
padding: const EdgeInsets.all(
15,
),
child: ListTile(
contentPadding: const EdgeInsets.all(7),
visualDensity: const VisualDensity(
vertical: -4,
horizontal: -4,
),
title: Text(stepData.content['name'] ?? ''),
subtitle: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 3,
child: Icon(Icons.work),
),
Expanded(
flex: 7,
child: Text(stepData.content['occupation'] ?? ''),
),
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 3,
child: Icon(Icons.phone),
),
Expanded(
flex: 7,
child: Text(stepData.content['mobileNumber'] ?? ''),
),
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const Expanded(
flex: 3,
child: Icon(Icons.email),
),
Expanded(
flex: 7,
child: Text(stepData.content['email'] ?? ''),
),
],
),
const SizedBox(
height: 20,
),
Text(
'Contact Link',
style: theme.textTheme.titleMedium,
),
const SizedBox(
height: 7,
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 3,
child: Text(
'Linked-In',
style: theme.textTheme.caption,
),
),
Expanded(
flex: 7,
child: GestureDetector(
onTap: () {
_launchURL(stepData.content['contact_list']['LinkedIn']);
},
child: Text(
stepData.content['contact_list']['LinkedIn'] ?? '',
style: theme.textTheme.titleMedium?.copyWith(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
),
),
],
),
const SizedBox(
height: 10,
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 3,
child: Text(
'Portfolio',
style: theme.textTheme.caption,
),
),
Expanded(
flex: 7,
child: GestureDetector(
onTap: () {
_launchURL(stepData.content['contact_list']['Portfolio']);
},
child: Text(
stepData.content['contact_list']['Portfolio'] ?? '',
style: theme.textTheme.titleMedium?.copyWith(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
),
),
],
),
],
),
),
const SizedBox(
height: 20,
),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
color: theme.dividerColor,
width: 0.8,
),
),
),
);
},
stepperThemeData: StepperThemeData(
lineColor: theme.primaryColor,
lineWidth: 5,
),
physics: const BouncingScrollPhysics(),
),
),
);
}
Future<void> _launchURL(String? url) async {
if (url == null) {
return;
}
try {
if (await canLaunchUrl(Uri.parse(url))) {
await launchUrl(Uri.parse(url));
}
return;
} catch (e) {
if (kDebugMode) {
print('Failed to launch URL - $e');
}
}
}
}
关于我
我是Subhash Chandra Shukla，一名Flutter开发者。
链接
许可证
MIT许可证。
通过上述代码示例，您可以轻松集成并使用 StepperListView 插件来创建具有丰富功能的步进器列表视图。
更多关于Flutter步进器列表视图插件stepper_list_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter步进器列表视图插件stepper_list_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用stepper_list_view插件的一个简单示例。这个插件允许你创建一个步进器（Stepper）列表视图，非常适合需要用户逐步完成一系列任务的场景。
首先，你需要在pubspec.yaml文件中添加stepper_list_view依赖项：
dependencies:
flutter:
sdk: flutter
stepper_list_view: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个完整的Flutter应用示例，展示如何使用stepper_list_view插件：
import 'package:flutter/material.dart';
import 'package:stepper_list_view/stepper_list_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stepper ListView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<StepperItem> stepperItems = [
StepperItem(
title: 'Step 1',
content: Text('This is the content of step 1.'),
onStepContinue: () {
// 可以在这里添加继续到下一步的逻辑
print('Proceeding to Step 2');
return true; // 返回true以继续到下一步，返回false则停留在当前步骤
},
),
StepperItem(
title: 'Step 2',
content: Text('This is the content of step 2.'),
onStepContinue: () {
print('Proceeding to Step 3');
return true;
},
),
StepperItem(
title: 'Step 3',
content: Text('This is the content of step 3.'),
onStepContinue: () {
print('All steps completed!');
return false; // 返回false表示这是最后一步，不再继续
},
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stepper ListView Example'),
),
body: StepperListView(
stepperItems: stepperItems,
onFinish: () {
// 当所有步骤完成时执行的回调
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('All steps completed!')),
);
},
),
);
}
}
class StepperItem {
final String title;
final Widget content;
final Function onStepContinue;
StepperItem({required this.title, required this.content, required this.onStepContinue});
}
在这个示例中：
- 我们定义了一个
StepperItem类，用于存储每个步骤的标题、内容和继续到下一步的回调。 - 在
_MyHomePageState类中，我们创建了一个包含三个步骤的stepperItems列表。 - 每个步骤都有一个标题和内容，以及一个
onStepContinue回调，当用户点击继续按钮时，这个回调会被调用。 - 我们使用
StepperListView组件来显示这些步骤，并传递stepperItems列表和完成所有步骤时的回调onFinish。
这样，你就可以在Flutter应用中创建一个简单的步进器列表视图了。根据需求，你可以自定义每个步骤的内容、样式和行为。
