Flutter-SmoothPageIndicator-Lottie

SmoothPageIndicator

平滑的页面指示器。我称它为点集。效果与 dots indicator 类似，但样式更多样。

依赖引入

1
smooth_page_indicator: ^1.0.0+2

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
SmoothPageIndicator(
  //this controller is PageController,which is usually used in PageView to controlle the page changing
  controller: _controller,
  count: 3,
  onDotClicked: (index){
    _controller.jumpToPage(index);
  },
  //是特效！我加了特效！
  //ExpandingDotsEffect,ColorTransitionEffect,JumpingDotEffect...
  effect: SwapEffect(
    activeDotColor: Colors.deepPurple,
    dotColor: Colors.deepPurple.shade200
  ),
)

Lottie

一个可以渲染动态特效的工具。常用于渲染 AE 导出的 json 格式的特效。

可配合LottieFiles使用。

依赖引入

1
lottie: ^1.4.3 # A library for animations

使用

1
2
Lottie.asset("assets/lotties/wifi-high-speed-internet.json") //通过预设资源使用
Lottie.network("https://assets5.lottiefiles.com/packages/lf20_mdxpRNhzMQ.json") //通过网络资源使用

两者结合

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
64
65
66
67
class IntroductionScreensPage extends StatelessWidget {
  //the page controller is essential
  final PageController _controller=PageController();

  IntroductionScreensPage({super.key});

  @override
  Widget build(BuildContext context) {
    //only using the stack layout can make the dots bar shown correctly on the screen
    //因为用column会超出屏幕，然后报错
    return Stack(
      alignment: const AlignmentDirectional(0, 0.75),
      children: [
        PageView(
          controller: _controller,
          children: const [
            IntroductionPage1(),
            IntroductionPage2(),
            IntroductionPage3()
          ],
        ),
        SmoothPageIndicator(
          controller: _controller,
          count: 3,
          onDotClicked: (index){
            _controller.jumpToPage(index);
          },
          //是特效！我加了特效！
          //ExpandingDotsEffect,ColorTransitionEffect,JumpingDotEffect...
          effect: SwapEffect(
            activeDotColor: Colors.deepPurple,
            dotColor: Colors.deepPurple.shade200
          ),
        )
      ],
    );
  }
}

class IntroductionPage1 extends StatelessWidget {
  const IntroductionPage1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.deepPurple.shade300,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const SizedBox(height: 30,),
            const Text(
              "It's Achat",
              style: TextStyle(
                fontFamily: "Bebas_Neue",
                fontSize: 70,
                color: Colors.white
              ),
            ),
            Lottie.asset("assets/lotties/talk-show2.json"),
            const SizedBox(height: 70,),
          ],
        ),
      ),
    );
  }
}

效果图

image-20221027134752117