Flutter Package

Intro Slider

container

This is "intro_slider" widget package made by Duy Tran. Here is more info

First of all, We need to add package dependency in "pubspec.yaml" files

dependencies:
  flutter:
    sdk: flutter
  intro_slider: ^2.0.3
1
2
3
4

main.dart

import 'package:flutter/material.dart';
import './pages/slider_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: SliderWidget(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

and then import package into widget dart file.

import 'package:intro_slider/intro_slider.dart';
1

slider_widget.dart

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import './profile.dart';

class SliderWidget extends StatefulWidget {
  @override
  _SliderWidgetState createState() => _SliderWidgetState();
}

class _SliderWidgetState extends State<SliderWidget> {
  List<Slide> slides = new List();

  @override
  void initState() {
    super.initState();

    slides.add(
      new Slide(
        title: "ERASER",
        description:
            "Allow miles wound place the leave had. To sitting subject no improve studied limited",
        styleDescription:
            TextStyle(height: 1.3, fontSize: 20, color: Colors.white),
        backgroundColor: Color(0xfff5a623),
      ),
    );
    slides.add(
      new Slide(
        title: "PENCIL",
        description:
            "Ye indulgence unreserved connection alteration appearance",
        styleDescription:
            TextStyle(height: 1.3, fontSize: 20, color: Colors.white),
        backgroundColor: Color(0xff203152),
      ),
    );
    slides.add(
      new Slide(
        title: "RULER",
        description:
            "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
        styleDescription:
            TextStyle(height: 1.3, fontSize: 20, color: Colors.white),
        backgroundColor: Color(0xff9932CC),
      ),
    );
  }

  void onDonePress() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => Profile()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
      slides: this.slides,
      onDonePress: this.onDonePress,
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
  • Line 2 code : Import intro_slider package.
  • Line 5 - 8 code : Declare statefulWidget
  • Line 10 code : Define SliderWidgetState
  • Line 17 - 26 code : This is slide 1 element.(title / description / styleDescription / backgroundColor, there are more here). Please take a look at "Slide object attributes"
  • Line 49- 54 code : This is function for "Done" button on the bottom right of slider screen. In this project i import "profile.dart" and redirect to profile page. You can connect any widget file.