cool_stepper_custom 1.2.1 cool_stepper_custom: ^1.2.1 copied to clipboard
CoolStepperCustom is a widget that displays a step by step sequence of operations. it could be helpful for a form wizard or onboarding.
import 'package:cool_stepper_custom/cool_stepper_custom.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Cool Stepper',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
fontFamily: GoogleFonts.poppins().fontFamily,
),
debugShowCheckedModeBanner: false,
home: MyHomePage(title: 'Cool Stepper'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _formKey = GlobalKey<FormState>();
String? selectedRole = 'Writer';
final TextEditingController _nameCtrl = TextEditingController();
final TextEditingController _emailCtrl = TextEditingController();
@override
Widget build(BuildContext context) {
final steps = [
CoolStepCustom(
title: 'Basic Information',
subtitle: 'Please fill some of the basic information to get started',
content: Form(
key: _formKey,
child: Column(
children: [
_buildTextField(
labelText: 'Name',
validator: (value) {
if (value!.isEmpty) {
return 'Name is required';
}
return null;
},
controller: _nameCtrl,
),
_buildTextField(
labelText: 'Email Address',
validator: (value) {
if (value!.isEmpty) {
return 'Email address is required';
}
return null;
},
controller: _emailCtrl,
),
],
),
),
validation: () {
if (!_formKey.currentState!.validate()) {
return 'Fill form correctly';
}
return null;
},
),
CoolStepCustom(
title: 'Select your role',
subtitle: 'Choose a role that better defines you',
content: Container(
child: Row(
children: <Widget>[
_buildSelector(
context: context,
name: 'Writer',
),
SizedBox(width: 5.0),
_buildSelector(
context: context,
name: 'Editor',
),
],
),
),
validation: () {
return null;
},
),
];
final stepper = CoolStepperCustom(
showErrorSnackbar: false,
onCompleted: () {
print('Steps completed!');
},
steps: steps,
config: CoolStepperCustomConfig(
backText: 'Previous',
backTextStyle: Theme.of(context)
.primaryTextTheme
.button!
.copyWith(color: Colors.grey),
backButtonStyle: TextButton.styleFrom(backgroundColor: Colors.white),
backButtonPadding: EdgeInsets.all(10.0),
nextText: 'Next',
nextTextStyle: Theme.of(context)
.primaryTextTheme
.button!
.copyWith(color: Colors.white),
nextButtonStyle: TextButton.styleFrom(
backgroundColor: Theme.of(context).primaryColor),
nextButtonPadding: EdgeInsets.all(10.0),
finalText: 'Finish',
finalTextStyle: Theme.of(context)
.primaryTextTheme
.button!
.copyWith(color: Colors.white),
finalButtonStyle: TextButton.styleFrom(backgroundColor: Colors.green),
finalButtonPadding: EdgeInsets.all(10.0),
),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),
),
body: Container(
width: 800.0,
child: stepper,
),
);
}
Widget _buildTextField({
String? labelText,
FormFieldValidator<String>? validator,
TextEditingController? controller,
}) {
return Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: labelText,
),
validator: validator,
controller: controller,
),
);
}
Widget _buildSelector({
BuildContext? context,
required String name,
}) {
final isActive = name == selectedRole;
return Expanded(
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
curve: Curves.easeInOut,
decoration: BoxDecoration(
color: isActive ? Theme.of(context!).primaryColor : null,
border: Border.all(
width: 0,
),
borderRadius: BorderRadius.circular(8.0),
),
child: RadioListTile(
value: name,
activeColor: Colors.white,
groupValue: selectedRole,
onChanged: (String? v) {
setState(() {
selectedRole = v;
});
},
title: Text(
name,
style: TextStyle(
color: isActive ? Colors.white : null,
),
),
),
),
);
}
}