Skip to content

Commit

Permalink
Merge pull request #2 from Iconica-Development/feature/styling
Browse files Browse the repository at this point in the history 
updated the styling of the steps
  • Loading branch information
@Gorter-dev
Gorter-dev authored Nov 25, 2022
2 parents 329e4ed + 25495bb commit ba365fb
Show file tree
Hide file tree
Showing 13 changed files with 211 additions and 65 deletions.
9 changes: 7 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## [0.0.1] - 29 August 2022
## [1.0.2] - 25 November 2022

* Initial Release
- Updated the basic styling of the stepper component
- Renamed the component to flutter_stepper instead of stepper

## [0.0.1] - 29 August 2022

- Initial Release
7 changes: 5 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
# stepper

A Flutter package for creating a list of steps that are horizontally aligned. The steps can contain a widget and between each step a line is drawn.

Supports all Flutter platforms.

![screenshot of component](./screenshot.png)

## Usage

To use this package, add `stepper` as a [dependency in your pubspec.yaml file](https://flutter.dev/docs/development/platform-integration/platform-channels).
To use this package, add `flutter_stepper` as a [dependency in your pubspec.yaml file](https://flutter.dev/docs/development/platform-integration/platform-channels).

### Example

Expand All @@ -21,4 +24,4 @@ If you would like to contribute to the plugin (e.g. by improving the documentati

## Author

This stepper for Flutter is developed by [Iconica](https://iconica.nl). You can contact us at <support@iconica.nl>
This flutter_stepper for Flutter is developed by [Iconica](https://iconica.nl). You can contact us at <support@iconica.nl>
8 changes: 7 additions & 1 deletion example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class _StepperDemoState extends State<StepperDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Padding(
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.05,
Expand All @@ -32,7 +33,12 @@ class _StepperDemoState extends State<StepperDemo> {
children: [
Row(
children: [
const Text('Show all steps'),
const Text(
'Show all steps',
style: TextStyle(
color: Colors.white,
),
),
Switch(
value: _showAllSteps,
onChanged: (value) {
Expand Down
40 changes: 33 additions & 7 deletions example/lib/vertical_multi.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// SPDX-License-Identifier: BSD-3-Clause

import 'package:flutter/material.dart';
import 'package:stepper/stepper.dart';
import 'package:flutter_stepper/stepper.dart';

class VerticalMultiPageStepper extends StatefulWidget {
const VerticalMultiPageStepper({Key? key}) : super(key: key);
Expand All @@ -29,43 +29,69 @@ class _VerticalMultiPageStepperState extends State<VerticalMultiPageStepper> {
'eiusmod tempor incididunt ut labore et dolore magna aliqua. '
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris'
' nisi ut aliquip ex ea commodo consequat.',
style: TextStyle(color: Colors.white),
),
),
MultiStepperView(
theme: StepperTheme(
stepIndicatorTextStyle:
Theme.of(context).textTheme.bodyText2?.copyWith(
color: Colors.black,
),
lineColor: Colors.white,
),
showAllSteps: false,
currentStep: _currentStep,
steps: [
MultiViewStep(
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Wie ben je?'),
const Text(
'Wie ben je?',
style: TextStyle(color: Colors.white),
),
const SizedBox(
height: 20,
),
const Text('Hobbies, wat vind je leuk om te doen?'),
const Text(
'Hobbies, wat vind je leuk om te doen?',
style: TextStyle(color: Colors.white),
),
],
),
),
MultiViewStep(
content: Column(
children: [
const Text('Upload profiel foto'),
const Text(
'Upload profiel foto',
style: TextStyle(color: Colors.white),
),
const SizedBox(
height: 20,
),
const Text('Laat je zien aan je collega\'s'),
const Text(
'Laat je zien aan je collega\'s',
style: TextStyle(color: Colors.white),
),
],
),
),
MultiViewStep(
content: Column(
children: [
const Text('Smoelenboek'),
const Text(
'Smoelenboek',
style: TextStyle(color: Colors.white),
),
const SizedBox(
height: 20,
),
const Text('Wat mogen collega\'s'),
const Text(
'Wat mogen collega\'s',
style: TextStyle(color: Colors.white),
),
],
),
),
Expand Down
96 changes: 82 additions & 14 deletions example/lib/vertical_single.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// SPDX-License-Identifier: BSD-3-Clause

import 'package:flutter/material.dart';
import 'package:stepper/stepper.dart';
import 'package:flutter_stepper/stepper.dart';

class VerticalSinglePageStepper extends StatefulWidget {
const VerticalSinglePageStepper({Key? key}) : super(key: key);
Expand All @@ -23,6 +23,13 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: MultiStepperView(
theme: StepperTheme(
stepIndicatorTextStyle:
Theme.of(context).textTheme.bodyText2?.copyWith(
color: Colors.black,
),
lineColor: Colors.white,
),
showAllSteps: true,
currentStep: _currentStep,
zeroIndexed: false,
Expand All @@ -34,8 +41,18 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Datum', style: Theme.of(context).textTheme.headline6),
Text('Datum', style: Theme.of(context).textTheme.bodyText2),
Text(
'Datum',
style: Theme.of(context).textTheme.headline6?.copyWith(
color: Colors.white,
),
),
Text(
'Datum',
style: Theme.of(context).textTheme.bodyText2?.copyWith(
color: Colors.white,
),
),
],
),
size: 100,
Expand All @@ -46,11 +63,15 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
children: [
Text(
'Tijd',
style: Theme.of(context).textTheme.headline6,
style: Theme.of(context).textTheme.headline6?.copyWith(
color: Colors.white,
),
),
Text(
'Selecteer een tijd',
style: Theme.of(context).textTheme.bodyText2,
style: Theme.of(context).textTheme.bodyText2?.copyWith(
color: Colors.white,
),
),
],
),
Expand All @@ -59,8 +80,18 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Product'),
const Text('Welk product'),
const Text(
'Product',
style: TextStyle(
color: Colors.white,
),
),
const Text(
'Welk product',
style: TextStyle(
color: Colors.white,
),
),
const SizedBox(height: 50),
],
),
Expand All @@ -69,8 +100,18 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Temperatuur'),
const Text('Selecteer gemeten temperatuur'),
const Text(
'Temperatuur',
style: TextStyle(
color: Colors.white,
),
),
const Text(
'Selecteer gemeten temperatuur',
style: TextStyle(
color: Colors.white,
),
),
const SizedBox(height: 50),
],
),
Expand All @@ -79,22 +120,49 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Norm'),
const Text('Selecteer gemeten temperatuur'),
const Text(
'Norm',
style: TextStyle(
color: Colors.white,
),
),
const Text(
'Selecteer gemeten temperatuur',
style: TextStyle(
color: Colors.white,
),
),
const SizedBox(height: 50),
],
),
),
MultiViewStep(
content: Column(
children: [
const Text('Maatregel'),
const Text('Omschrijving'),
const Text(
'Maatregel',
style: TextStyle(
color: Colors.white,
),
),
const Text(
'Omschrijving',
style: TextStyle(
color: Colors.white,
),
),
const SizedBox(height: 50),
],
),
),
const MultiViewStep(content: Text('Akkoord')),
const MultiViewStep(
content: Text(
'Akkoord',
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
Expand Down
Loading

0 comments on commit ba365fb

Please sign in to comment.