mirror of
https://github.com/nisrulz/flutter-examples.git
synced 2026-08-24 16:50:47 +00:00
780c0f1dbb
Convert 20 more single-file apps to the validated pattern: lib/main.dart holds only the runApp + MaterialApp bootstrap, while a new lib/example.dart holds the full screen (Scaffold, AppBar) and the focused example code. Apps: enabling_splash_screen, getx_counter_app, image_from_network, infinite_list, load_local_image, load_local_json, persist_key_value, push_notifications, sliver_app_bar_example, stateless_widgets, tic_tac_toe, tip_calculator, using_alert_dialog, using_edittext, using_expansionpanel, using_http_get, using_interactiveviewer, using_snackbar, using_stepper, using_theme
95 lines
2.9 KiB
Dart
95 lines
2.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
// Example: a vertical Stepper with three steps and navigation controls.
|
|
class Example extends StatefulWidget {
|
|
const Example({super.key});
|
|
|
|
@override
|
|
State<Example> createState() => _ExampleState();
|
|
}
|
|
|
|
class _ExampleState extends State<Example> {
|
|
// init the step to 0th position
|
|
int current_step = 0;
|
|
List<Step> my_steps = [
|
|
Step(
|
|
// Title of the Step
|
|
title: const Text("Step 1"),
|
|
// Content, it can be any widget here. Using basic Text for this example
|
|
content: const Text("Hello!"),
|
|
isActive: true),
|
|
Step(
|
|
title: const Text("Step 2"),
|
|
content: const Text("World!"),
|
|
// You can change the style of the step icon i.e number, editing, etc.
|
|
state: StepState.editing,
|
|
isActive: true),
|
|
Step(
|
|
title: const Text("Step 3"),
|
|
content: const Text("Hello World!"),
|
|
isActive: true),
|
|
];
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
// Appbar
|
|
appBar: AppBar(
|
|
// Title
|
|
title: const Text("Using Stepper"),
|
|
),
|
|
// Body
|
|
body: Container(
|
|
child: Stepper(
|
|
// Using a variable here for handling the currentStep
|
|
currentStep: current_step,
|
|
// List the steps you would like to have
|
|
steps: my_steps,
|
|
// Define the type of Stepper style
|
|
// StepperType.horizontal : Horizontal Style
|
|
// StepperType.vertical : Vertical Style
|
|
type: StepperType.vertical,
|
|
// Know the step that is tapped
|
|
onStepTapped: (step) {
|
|
// On hitting step itself, change the state and jump to that step
|
|
setState(() {
|
|
// update the variable handling the current step value
|
|
// jump to the tapped step
|
|
current_step = step;
|
|
});
|
|
// Log function call
|
|
print("onStepTapped : $step");
|
|
},
|
|
onStepCancel: () {
|
|
// On hitting cancel button, change the state
|
|
setState(() {
|
|
// update the variable handling the current step value
|
|
// going back one step i.e subtracting 1, until its 0
|
|
if (current_step > 0) {
|
|
current_step = current_step - 1;
|
|
} else {
|
|
current_step = 0;
|
|
}
|
|
});
|
|
// Log function call
|
|
print("onStepCancel : $current_step");
|
|
},
|
|
// On hitting continue button, change the state
|
|
onStepContinue: () {
|
|
setState(() {
|
|
// update the variable handling the current step value
|
|
// going back one step i.e adding 1, until its the length of the step
|
|
if (current_step < my_steps.length - 1) {
|
|
current_step = current_step + 1;
|
|
} else {
|
|
current_step = 0;
|
|
}
|
|
});
|
|
// Log function call
|
|
print("onStepContinue : $current_step");
|
|
},
|
|
)),
|
|
);
|
|
}
|
|
}
|