本文主要介紹如何使用 Flutter 制作一個(gè)具有酷炫液體滑動(dòng)效果的酷炫入門頁(yè)面

我將向您展示如何使用 Flutter 制作一個(gè)具有酷炫液體滑動(dòng)效果的酷炫入門頁(yè)面，所以不用多說，讓我們開始吧。在本課程中，我們不會(huì)

關(guān)注應(yīng)用程序的 UI，但我們將關(guān)注如何實(shí)現(xiàn)液體滑動(dòng)效果，以及如何為每張幻燈片創(chuàng)建屏幕。

好的，首先讓我們?yōu)楸窘坛烫砑右蕾図?xiàng)，我們將使用“ gooey_carousel ”包

訪問此鏈接： gooey_carousel 包

在 pubspec.yaml 文件中添加此依賴項(xiàng)

gooey_carousel: ^0.1.2

現(xiàn)在使用腳手架創(chuàng)建一個(gè)簡(jiǎn)單的有狀態(tài)小部件，并在腳手架的主體內(nèi)添加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]),],),);

現(xiàn)在創(chuàng)建一個(gè)名為 boardpage 的新文件，我們將在其中創(chuàng)建一個(gè)自定義小部件 boardPage()。

對(duì)于圖像資產(chǎn)，我添加了一個(gè)名為資產(chǎn)的文件夾并在其中添加了 3 個(gè)圖像

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> {@overrideWidget 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]),],),);} }

總結(jié)

以上是生活随笔為你收集整理的Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。