internal/flutter_introduction
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_introduction.git synced 2025-05-18 19:43:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add default styling

Browse source
This commit is contained in:
mike doornenbal 2024-04-19 09:52:01 +02:00
parent 15bebcd675
commit 690642ac9d
17 changed files with 277 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG.md
View file

@ -1,3 +1,8 @@
## 3.0.0
* Update default styling
* Add default introduction
## 2.1.0
* Upgrade dependencies

24
packages/flutter_introduction/example/lib/main.dart
View file

@ -39,20 +39,20 @@ class _MyHomePageState extends State<MyHomePage> {
body: Introduction(
options: IntroductionOptions(
pages: [
IntroductionPage(
title: const Text('First page'),
text: const Text('Wow a page'),
graphic: const FlutterLogo(),
const IntroductionPage(
title: Text('First page'),
text: Text('Wow a page'),
graphic: FlutterLogo(),
),
IntroductionPage(
title: const Text('Second page'),
text: const Text('Another page'),
graphic: const FlutterLogo(),
const IntroductionPage(
title: Text('Second page'),
text: Text('Another page'),
graphic: FlutterLogo(),
),
IntroductionPage(
title: const Text('Third page'),
text: const Text('The final page of this app'),
graphic: const FlutterLogo(),
const IntroductionPage(
title: Text('Third page'),
text: Text('The final page of this app'),
graphic: FlutterLogo(),
),
],
introductionTranslations: const IntroductionTranslations(

6
packages/flutter_introduction/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction
description: Combined Package of Flutter Introduction Widget and Flutter Introduction Service
version: 2.1.0
version: 3.0.0
publish_to: none
environment:
@ -13,12 +13,12 @@ dependencies:
flutter_introduction_widget:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_widget
flutter_introduction_service:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_service
dev_dependencies:

6
packages/flutter_introduction_firebase/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction_firebase
description: Flutter Introduction Page that uses firebase for the pages and some settings
version: 2.1.0
version: 3.0.0
publish_to: none
environment:
@ -15,12 +15,12 @@ dependencies:
flutter_introduction_widget:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_widget
flutter_introduction_service:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_service
dev_dependencies:

2
packages/flutter_introduction_interface/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction_interface
description: A new Flutter package project.
version: 2.1.0
version: 3.0.0
publish_to: none
environment:

4
packages/flutter_introduction_service/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction_service
description: A new Flutter package project.
version: 2.1.0
version: 3.0.0
publish_to: none
environment:
@ -13,7 +13,7 @@ dependencies:
flutter_introduction_interface:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_interface
dev_dependencies:

4
packages/flutter_introduction_shared_preferences/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction_shared_preferences
description: A new Flutter package project.
version: 2.1.0
version: 3.0.0
publish_to: none
environment:
@ -13,7 +13,7 @@ dependencies:
flutter_introduction_interface:
git:
url: https://github.com/Iconica-Development/flutter_introduction
ref: 2.1.0
ref: 3.0.0
path: packages/flutter_introduction_interface
shared_preferences: any

BIN
packages/flutter_introduction_widget/assets/first.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
packages/flutter_introduction_widget/assets/second.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
packages/flutter_introduction_widget/assets/third.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

34
packages/flutter_introduction_widget/example/lib/main.dart
View file

@ -32,29 +32,29 @@ class MyApp extends StatelessWidget {
home: IntroductionScreen(
options: IntroductionOptions(
pages: [
IntroductionPage(
title: const Text('Basic Page'),
text: const Text(
const IntroductionPage(
title: Text('Basic Page'),
text: Text(
'A page with some text and a widget in the middle.',
),
graphic: const FlutterLogo(size: 100),
graphic: FlutterLogo(size: 100),
),
IntroductionPage(
title: const Text('Layout Shift'),
text: const Text(
const IntroductionPage(
title: Text('Layout Shift'),
text: Text(
'You can change the layout of a page to mix things up.',
),
graphic: const FlutterLogo(size: 100),
graphic: FlutterLogo(size: 100),
layoutStyle: IntroductionLayoutStyle.imageTop,
),
IntroductionPage(
title: const Text(
const IntroductionPage(
title: Text(
'Decoration',
style: TextStyle(
color: Colors.white,
),
),
decoration: const BoxDecoration(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
@ -66,24 +66,24 @@ class MyApp extends StatelessWidget {
],
),
),
text: const Text(
text: Text(
'Add a Decoration to make a custom background, like a LinearGradient',
style: TextStyle(
color: Colors.white,
),
),
graphic: const FlutterLogo(
graphic: FlutterLogo(
size: 100,
),
),
IntroductionPage(
title: const Text(
const IntroductionPage(
title: Text(
'Background Image',
),
text: const Text(
text: Text(
'Add a Decoration with a DecorationImage, to add an background image',
),
decoration: const BoxDecoration(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(

115
packages/flutter_introduction_widget/lib/src/config/default_introduction_pages.dart Normal file
View file

@ -0,0 +1,115 @@
import 'package:flutter/material.dart';
import 'package:flutter_introduction_widget/flutter_introduction_widget.dart';
const List<IntroductionPage> defaultIntroductionPages = [
IntroductionPage(
decoration: BoxDecoration(
color: Color(0xffFAF9F6),
),
title: Column(
children: [
SizedBox(height: 100),
Text(
'welcome to iconinstagram',
style: TextStyle(
color: Color(0xff71C6D1),
fontSize: 24,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 6),
Text(
'Welcome to the world of Instagram, where creativity'
' knows no bounds and connections are made'
' through captivating visuals.',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
textAlign: TextAlign.center,
),
],
),
graphic: Image(
image: AssetImage(
'assets/first.png',
package: 'flutter_introduction_widget',
),
),
text: Text(''),
),
IntroductionPage(
decoration: BoxDecoration(
color: Color(0xffFAF9F6),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 100),
Text(
'discover iconinstagram',
style: TextStyle(
color: Color(0xff71C6D1),
fontSize: 24,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 6),
Text(
'Dive into the vibrant world of'
' Instagram and discover endless possibilities.'
' From stunning photography to engaging videos,'
' Instagram offers a diverse range of content to explore and enjoy.',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
textAlign: TextAlign.center,
),
],
),
graphic: Image(
image: AssetImage(
'assets/second.png',
package: 'flutter_introduction_widget',
),
),
text: Text(''),
),
IntroductionPage(
decoration: BoxDecoration(
color: Color(0xffFAF9F6),
),
title: Column(
children: [
SizedBox(height: 100),
Text(
'elevate your experience',
style: TextStyle(
color: Color(0xff71C6D1),
fontSize: 24,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 6),
Text(
'Whether promoting your business, or connecting'
' with friends and family, Instagram provides the'
' tools and platform to make your voice heard.',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
),
textAlign: TextAlign.center,
),
],
),
graphic: Image(
image: AssetImage(
'assets/third.png',
package: 'flutter_introduction_widget',
),
),
text: Text(''),
),
];

35
packages/flutter_introduction_widget/lib/src/config/introduction.dart
View file

@ -3,6 +3,7 @@
// SPDX-License-Identifier: BSD-3-Clause
import 'package:flutter/material.dart';
import 'package:flutter_introduction_widget/src/config/default_introduction_pages.dart';
enum IntroductionScreenMode { showNever, showAlways, showOnce }
@ -42,7 +43,7 @@ class IntroductionPage {
///
/// The [background] is fully optional and if not provided will show the
/// [ThemeData.colorScheme.background] as default.
IntroductionPage({
const IntroductionPage({
this.title,
this.text,
this.graphic,
@ -60,11 +61,11 @@ class IntroductionOptions {
const IntroductionOptions({
this.introductionTranslations = const IntroductionTranslations(),
this.introductionButtonTextstyles = const IntroductionButtonTextstyles(),
this.indicatorMode = IndicatorMode.dash,
this.indicatorMode = IndicatorMode.dot,
this.indicatorBuilder,
this.layoutStyle = IntroductionLayoutStyle.imageCenter,
this.pages = const [],
this.buttonMode = IntroductionScreenButtonMode.disabled,
this.pages = defaultIntroductionPages,
this.buttonMode = IntroductionScreenButtonMode.text,
this.tapEnabled = false,
this.mode = IntroductionScreenMode.showNever,
this.textAlign = TextAlign.center,
@ -248,9 +249,9 @@ class IntroductionOptions {
class IntroductionTranslations {
const IntroductionTranslations({
this.skipButton = 'skip',
this.nextButton = 'next',
this.previousButton = 'previous',
this.finishButton = 'finish',
this.nextButton = 'Next',
this.previousButton = 'Previous',
this.finishButton = 'Get Started',
});
final String skipButton;
final String nextButton;
@ -260,10 +261,22 @@ class IntroductionTranslations {
class IntroductionButtonTextstyles {
const IntroductionButtonTextstyles({
this.skipButtonStyle,
this.nextButtonStyle,
this.previousButtonStyle,
this.finishButtonStyle,
this.skipButtonStyle = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
this.nextButtonStyle = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
this.previousButtonStyle = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
this.finishButtonStyle = const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
});
final TextStyle? skipButtonStyle;
final TextStyle? nextButtonStyle;

111
packages/flutter_introduction_widget/lib/src/types/page_introduction.dart
View file

@ -351,12 +351,28 @@ class IntroductionTwoButtons extends StatelessWidget {
),
IntroductionButtonType.previous,
) ??
TextButton(
onPressed: _previous,
child: Text(
translations.previousButton,
style: options
.introductionButtonTextstyles.previousButtonStyle,
InkWell(
onTap: _previous,
child: Container(
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: const Color(
0xff979797,
),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Text(
translations.previousButton,
style: options
.introductionButtonTextstyles.previousButtonStyle,
),
),
),
),
),
] else
@ -371,11 +387,28 @@ class IntroductionTwoButtons extends StatelessWidget {
),
IntroductionButtonType.next,
) ??
TextButton(
onPressed: _next,
child: Text(
translations.nextButton,
style: options.introductionButtonTextstyles.nextButtonStyle,
InkWell(
onTap: _next,
child: Container(
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: const Color(
0xff979797,
),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Text(
translations.nextButton,
style: options
.introductionButtonTextstyles.nextButtonStyle,
),
),
),
),
),
] else if (last) ...[
@ -391,14 +424,30 @@ class IntroductionTwoButtons extends StatelessWidget {
),
IntroductionButtonType.finish,
) ??
TextButton(
onPressed: () {
InkWell(
onTap: () {
onFinish?.call();
},
child: Text(
translations.finishButton,
style:
options.introductionButtonTextstyles.finishButtonStyle,
child: Container(
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: const Color(
0xff979797,
),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Text(
translations.finishButton,
style: options
.introductionButtonTextstyles.finishButtonStyle,
),
),
),
),
),
] else ...[
@ -426,14 +475,30 @@ class IntroductionTwoButtons extends StatelessWidget {
),
IntroductionButtonType.finish,
) ??
ElevatedButton(
onPressed: () {
InkWell(
onTap: () {
onFinish?.call();
},
child: Text(
translations.finishButton,
style: options
.introductionButtonTextstyles.finishButtonStyle,
child: Container(
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: const Color(
0xff979797,
),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Text(
translations.finishButton,
style: options.introductionButtonTextstyles
.finishButtonStyle,
),
),
),
),
),
),

1
packages/flutter_introduction_widget/lib/src/widgets/indicator.dart
View file

@ -63,6 +63,7 @@ class Indicator extends StatelessWidget {
);
case IndicatorMode.dash:
return DashIndicator(
color: theme.colorScheme.primary,
controller: controller,
selectedColor: theme.colorScheme.primary,
itemCount: count,

4
packages/flutter_introduction_widget/pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_introduction_widget
description: Flutter Introduction Widget for showing a list of introduction pages on a single scrollable page or horizontal pageview
version: 2.1.0
version: 3.0.0
homepage: https://github.com/Iconica-Development/flutter_introduction_widget
environment:
@ -20,3 +20,5 @@ dev_dependencies:
ref: 6.0.0
flutter:
assets:
- assets/

2
pubspec.yaml
View file

@ -1,5 +1,5 @@
name: flutter_introduction_workspace
version: 2.1.0
version: 3.0.0
environment:
sdk: '>=3.1.0 <4.0.0'