Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
生活随笔
收集整理的這篇文章主要介紹了
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()。
對于圖像資產,我添加了一個名為資產的文件夾并在其中添加了 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> {@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]),],),);} }總結
以上是生活随笔為你收集整理的Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Flutter 构建一个完整的聊天应用程
- 下一篇: 使用 Flutter 制作一个简单的笑话