beximo/onboarding_screen

This package is for flutter development and it's a contribution from beximo community to the flutter community. This package gives you the power to implement an onboarding screen to your app with a full customization option.

onboarding_screen

A customizable onboarding screen with different options and animations for your flutter apps.

Getting Started

To install the package

1. onboarding_screen: ^0.0.2 (copy this and paste it in your pubspec.yaml file )
2. flutter pub get run this command
3. import 'package:onboarding_screen/onboarding_screen.dart'; copy and this statment into your project and start using it.

How this package works

Status

• Onboarding screen with custom option - Complete
• Animations remaining

How to use:

• Example code

import 'package:flutter/material.dart';
import 'package:onboarding_screen/onboarding_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<_SliderModel> mySlides = [
    _SliderModel(
      imageAssetPath: Image.asset(
        'assets/images/main_logo.png',
        scale: 1,
      ),
      title: 'Developer Student Club',
      desc: 'discover people',
      minTitleFontSize: 10,
      descStyle: const TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w400,
        color: Colors.black,
      ),
      titleStyle: const TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w400,
        color: Colors.black,
      ),
    ),
    _SliderModel(
      imageAssetPath: Image.asset('assets/images/logo_vitbhopal.png'),
      title: 'Developer Student Club',
      desc: 'discover people',
    ),
    _SliderModel(
      imageAssetPath: Image.asset('assets/images/developer_gif.gif'),
      title: 'Developer Student Club',
      desc: 'discover people',
    ),
    _SliderModel(
      imageAssetPath: Image.asset('assets/images/backgroundImg.png'),
      title: 'Developer Student Club',
      desc: 'discover people',
    ),
    _SliderModel(
      imageAssetPath: Image.asset('assets/images/main_logo.png'),
      title: 'Developer Student Club',
      desc: 'discover people',
    ),
  ];
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return OnBoardingScreen(
      label: const Text('Get Started'),

      /// This function works when you will complete `OnBoarding`
      function: () {
        print('Navigation');
      },

      /// This [mySlides] must not be more than 5.
      mySlides: mySlides,
      controller: _controller,
      slideIndex: 0,
      statusBarColor: Colors.red,
      startGradientColor: Colors.red,
      endGradientColor: Colors.blue,
      skipStyle: TextStyle(color: Colors.white),
      pageIndicatorColorList: [
        Colors.white,
        Colors.green,
        Colors.red,
        Colors.yellow,
        Colors.white
      ],
    );
  }
}

class _SliderModel {
  const _SliderModel({
    this.imageAssetPath,
    this.title = "title",
    this.desc = "title",
    this.miniDescFontSize = 12.0,
    this.minTitleFontSize = 15.0,
    this.descStyle,
    this.titleStyle,
  });

  final Image imageAssetPath;
  final String title;
  final TextStyle titleStyle;
  final double minTitleFontSize;
  final String desc;
  final TextStyle descStyle;
  final double miniDescFontSize;
}

Pull Requests

I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request. Here are some basic rules to follow to ensure timely addition of your request:

1. Match the document style as closely as possible.
2. Please keep PR titles easy to read and descriptive of changes, this will make them easier to merge :)
3. Pull requests must be made against master branch for this particular repository.
4. Check for existing issues first, before filing an issue.
5. Make sure you follow the set standard as all other projects in this repo do
6. Have fun!

Created & Maintained By

Ankit sagar (Twitter) (YouTube) (Instagram)

Contributors

• Abhishek

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing plugin code, view the documentation.

onboarding_screen's Issues

Animations missing

The animation should be there while sliding the tabs and in the tab indicator.

Integration test

I will add Integration testing in the plugin as well as an example.

pub score

Hey @woinbo
can we use HTTPS here? (https://github.com/beximo/onboarding_screen#getting-started-1)

Different form of onboarding required

Only one type of design is available in the current version of onboarding_screen. We need to implement more designs.

Image is not loaded in readme.md and more

1. Image is not loaded in readme.md file
2. print should not be there in product code
3. Better to use assert
4. Define the constructor first
5. Use const or final whenever possible
6. Please follow the convention of file name in Dart

Thanks.

[Improvement] Migrate package to Null safety

Add enhancement label to this issue please. @woinbo
and also assign this to me!!