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

本文主要介绍如何使用 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()。

对于图像资源，我添加了一个名为assests的文件夹并在其中添加了 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]),
        ],
      ),
    );
  }
}

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础

• 第二章 Dart 异步编程
  

• 第三章 异步之 Stream 详解

• 第四章 Dart标准输入输出流
  

• 第五章 Dart 网络编程

• 第六章 Flutter 爬虫与服务端
  

• 第七章 Dart 的服务端开发

• 第八章 Dart 调用C语言混合编程

• 第九章 LuaDardo中Dart与Lua的相互调用
  

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件

• 第七章：功能型组件

• 第八章：事件处理与通知

• 第九章：动画

• 第十章：自定义组件
  

• 第十一章：文件操作与网络请求

• 第十二章：Flutter扩展

• 第十三章：国际化

• 第十四章：Flutter核心原理

• 第十五章：一个完整的Flutter应用
  

有需要学习资料的朋友扫描下方二维码即可免费领取！！！