Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面

Posted 2021-09-03 Lucklyの博客

本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面

我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面，所以不用多说，让我们开始吧。在本课程中，我们不会

关注应用程序的 UI，但我们将关注如何实现液体滑动效果，以及如何为每张幻灯片创建屏幕。

好的，首先让我们为本教程添加依赖项，我们将使用“ gooey_carousel ”包

访问此链接： gooey_carousel 包

在 pubspec.yaml 文件中添加此依赖项

gooey_carousel: ^0.1.2

现在使用脚手架创建一个简单的有状态小部件，并在脚手架的主体内添加boardPage小部件

return Scaffold(
      body: Scaffold(
        children: [
          boardPage("assets/page1.png", "Create your own notes", Colors.green),
          boardPage(
              "assets/page2.png", "Share your notes with friends", Colors.blue),
          boardPage(
              "assets/page3.png",
              "Protect your data with our authentication system",
              Colors.purple[200]),
        ],
      ),
    );

现在创建一个名为 boardpage 的新文件，我们将在其中创建一个自定义小部件 boardPage()。

对于图像资产，我添加了一个名为资产的文件夹并在其中添加了 3 个图像

boardpage.dart

import 'package:flutter/material.dart';

Widget boardPage(String imgUrl, String description, Color color) {
  return Container(
    color: color,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(imgUrl),
          Text(
            description,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 35.0,
              color: Colors.white,
            ),
          ),
        ],
      ),
    ),
  );
}

就是这样。

这是 main.dart 文件的完整代码

import 'package:flutter/material.dart';
import 'package:gooey_carousel/gooey_carrousel.dart';
import 'package:liquid_swipe/boardpage.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GooeyCarousel(
        children: [
          boardPage("assets/page1.png", "Create your own notes", Colors.green),
          boardPage(
              "assets/page2.png", "Share your notes with friends", Colors.blue),
          boardPage(
              "assets/page3.png",
              "Protect your data with our authentication system",
              Colors.purple[200]),
        ],
      ),
    );
  }
}