flutter开发----多屏开场介绍页面制作

前言

现在的app一打开都是有许多的介绍页面，所以今天我就分享这个功能的介绍

准备工具

这套课程是采用Android Studio进行开发的。当前在此之前请准备好Flutter开发环境，我这里就不进行讲解了。

导入插件和相关图片

首先导入我们的插件

intro_views_flutter: ^2.3.0

  assets:
   - images/1.jpg
   - images/2.jpg
   - images/3.jpg

小实例开发流程

介绍页面制作

import 'package:flutter/material.dart';
import 'package:intro_views_flutter/intro_views_flutter.dart';
import 'package:intro_views_flutter/Models/page_view_model.dart';
import './new_page.dart';

class homePage extends StatelessWidget {
  
  final pages =[
    PageViewModel(
      pageColor: Colors.blueAccent,
      mainImage: Image.asset('images/1.jpg'),
      title: Text('第一页'),
      body: Text('海浪里的海鸥')
    ),
    PageViewModel(
      pageColor: Colors.blueAccent,
      mainImage: Image.asset('images/2.jpg'),
      title: Text('第二页'),
      body: Text('海滩的海鸥')
    ),
    PageViewModel(
      pageColor: Colors.blueAccent,
      mainImage: Image.asset('images/3.jpg'),
      title: Text('第三页'),
      body: Text('村边的海鸥')
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开场动画',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue
      ),
      home: Builder(
        builder: (context)=>IntroViewsFlutter(
        pages,
        onTapDoneButton: (){
        	//路由跳转
          Navigator.of(context).pushReplacementNamed('/page1');
        }, 
        showSkipButton: true,
        skipText: Text('跳过'),
        doneText: Text('完成'),
        pageButtonTextStyles: TextStyle(
          fontSize: 18.0,
          color: Colors.white
        ),
      ),
      ),
      routes: <String,WidgetBuilder>{
        '/page1':(BuildContext context)=>new NewPage()		//NewPage就是自己写的一个页面
      },
    );
  }
}

今天就分享到这个，希望可以帮助更多的小伙伴