Flutter引导页插件fancy_intro_carousel_slider的使用

Flutter引导页插件fancy_intro_carousel_slider的使用

Fancy Intro Carousel Slider 包让你能够为你的 Flutter 应用添加漂亮的引导页。

安装

1. 将最新版本的包添加到你的 pubspec.yaml 文件中（然后运行 dart pub get）：

dependencies:
  fancy_intro_carousel_slider: ^0.0.3

1. 导入包并在你的 Flutter 应用中使用它：

import 'package:fancy_intro_carousel_slider/fancy_intro_carousel_slider.dart';

示例

你可以修改多个属性：

• items
• dotHeight
• activeDot
• disabledDot
• innerPadding
• actionButton
• scrollDirection
• physics
• pageController

class FancyIntroCarouselSliderScreen extends StatelessWidget {  
  const FancyIntroCarouselSliderScreen({Key? key}) : super(key: key);  
  
  [@override](/user/override)  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: FancyIntroCarouselSlider(
          actionButton: Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Container(
                width: 300,
                height: 55,
                decoration: AppStyles.mainBlueColorBoxDecorationStyle,
                child: const Material(
                  color: AppPalette.transparentColor,
                  child: Center(
                      child: Text("Let's start",
                          style: AppStyles.whiteColor15spw700NotoSans)),
                ),
              ),
            ),
          ),
          pageController: pageController,
          dotHeight: 8,
          innerPadding: const EdgeInsets.only(left: 4),
          activeDot: AnimatedContainer(
            duration: const Duration(milliseconds: 250),
            margin: const EdgeInsets.only(right: 7),
            height: 8,
            width: 19,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: Colors.blue,
            ),
          ),
          disabledDot: AnimatedContainer(
            duration: const Duration(milliseconds: 250),
            margin: const EdgeInsets.only(right: 7),
            height: 8,
            width: 10,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: Colors.grey,
            ),
          ),
          items: [
            Column(
              children: [
                Container(
                  width: 320,
                  constraints: const BoxConstraints(maxHeight: 400),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: svg_provider.Svg(img),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Text(
                    title,
                    textAlign: TextAlign.center,
                    style: AppStyles.mainHeadlineColorw70020spPoppins,
                  ),
                ),
                const SizedBox(
                  height: 13,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 34),
                  child: Text(
                    desc,
                    textAlign: TextAlign.center,
                    style: AppStyles.mainHeadlineColorw50012spPoppinsLineHeight,
                  ),
                )
              ],
            )
          ],
        ),
    );  
  }  
}