hp_intro_screen 0.0.1 copy "hp_intro_screen: ^0.0.1" to clipboard
hp_intro_screen: ^0.0.1 copied to clipboard

A new Flutter package for onBoarding screen.

hp_intro_screen For Flutter #

An awesome Custom OnBoard screen for both android and ios

Features #

showing hp_intro_screen

Getting started #

To use this package, add hp_intro_screen as a dependency in your pubspec.yaml file.

Basic Usage #

HangingPandaIntro(
    pageController: PageController(),
   itemCount:[],

    onChange: (value) {
     // on page change
    },
    buildOnBoardingPage: (index, slides) {
     return Column();
     // get items like this formate
     //(slides[index].getImage(),slides[index].title(),slides[index].getDescriptionOne)
    },
)

ItemCount Example: #

var itmes = [
  {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title Hanging Panda',
        'description1': 'There are many variations of ',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': ' Tiltle2 Hanging Panda',
        'description1': '238427834696123867521',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title Lorem Ipsum',
        'description1': 'There are many variations of',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title2 Lorem Ipsum',
        'description1': 'There are many variations of',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
];

Full code example: #

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController();
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    skip() => {
          /// Your code here on skip
        };
    var items = [
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title Hanging Panda',
        'description1': 'There are many variations of ',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': ' Tiltle2 Hanging Panda',
        'description1': '238427834696123867521',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title Lorem Ipsum',
        'description1': 'There are many variations of',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
      {
        'image':
            'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
        'title': 'Title2 Lorem Ipsum',
        'description1': 'There are many variations of',
        'description2': 'passages of Lorem Ipsum available aaa',
        'description3': 'but the majority have suffered iiii',
      },
    ];
    void onPressed() {
      if (currentIndex < items.length) {
        _pageController.animateToPage(currentIndex + 1,
            duration: const Duration(milliseconds: 300), curve: Curves.ease);
      } else {
        // Here after finish nevigete to other screen
      }
    }

    Container buildDots(int index, BuildContext context) {
      return Container(
        height: 8,
        width: 8,
        margin: const EdgeInsets.only(right: 5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: currentIndex == index
              ? const Color(0XFFFC4442)
              : const Color(0XFFFC4442).withOpacity(0.3),
        ),
      );
    }

    return Scaffold(
        body: HangingPandaIntro(
      pageController: _pageController,
      onChange: (int value) {
        currentIndex = value;
        setState(() {});
      },
      itemCount: items,
      buildOnBoardingPage: (index, slides) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
                flex: 3,
                child: Container(
                  color: Colors.white,
                  child: Container(
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(100.0)),
                      color: Color.fromARGB(255, 244, 193, 192),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Container(
                          alignment: AlignmentDirectional.bottomCenter,
                          width: MediaQuery.of(context).size.width * 0.85,
                          height: MediaQuery.of(context).size.height * 0.35,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: NetworkImage(
                                slides[index].getImage(),
                              ),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height * 0.025,
                        ),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: List.generate(items.length,
                                (index) => buildDots(index, context))),
                        Container(
                          height: MediaQuery.of(context).size.height * 0.025,
                        ),
                      ],
                    ),
                  ),
                )),
            Expanded(
              flex: 2,
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: const Color.fromARGB(255, 244, 193, 192),
                child: Container(
                  decoration: const BoxDecoration(
                    borderRadius:
                        BorderRadius.only(topLeft: Radius.circular(100.0)),
                    color: Colors.white,
                  ),
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Container(
                          height: MediaQuery.of(context).size.height * 0.05,
                        ),
                        Text(
                          slides[index].getTitle(),
                          style: TextStyle(
                            fontSize:
                                MediaQuery.of(context).size.height * 0.030,
                            fontFamily: "Montserrat",
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height * 0.01,
                        ),
                        Padding(
                          padding: const EdgeInsets.all(20),
                          child: SizedBox(
                              width: MediaQuery.of(context).size.width * 0.7,
                              child: Text(
                                '${slides[index].getDescriptionOne()}'
                                '${slides[index].getDescriptionTwo()}'
                                '${slides[index].getDescriptionThree()}',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: MediaQuery.of(context).size.height *
                                      0.017,
                                  fontWeight: FontWeight.w600,
                                ),
                              )),
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height * 0.03,
                        ),
                        SizedBox(
                            width: MediaQuery.of(context).size.width * 0.30,
                            height: MediaQuery.of(context).size.width * 0.1,
                            child: TextButton(
                                onPressed: () {
                                  onPressed();
                                },
                                style: ButtonStyle(
                                    backgroundColor:
                                        MaterialStateProperty.all<Color>(
                                            const Color(0XFFFC4442)),
                                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(10.0),
                                            side: const BorderSide(
                                                color: Color(0XFFFC4442))))),
                                child: Text(
                                    currentIndex == items.length - 1
                                        ? "Get started"
                                        : 'Next',
                                    style: TextStyle(
                                        fontSize: MediaQuery.of(context).size.height * 0.018,
                                        color: Colors.white)))),
                        currentIndex != items.length - 1
                            ? TextButton(
                                onPressed: skip,
                                child: Text('SKIP',
                                    style: TextStyle(
                                        fontSize:
                                            MediaQuery.of(context).size.height *
                                                0.024,
                                        fontWeight: FontWeight.w700,
                                        color: Colors.black)))
                            : const SizedBox(),
                      ]),
                ),
              ),
            ),
          ],
        );
      },
    ));
  }
}


2
likes
120
pub points
0%
popularity

Publisher

unverified uploader

A new Flutter package for onBoarding screen.

Repository (GitHub)
View/report issues

Documentation

API reference

License

GPL-3.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on hp_intro_screen