本文主要介紹如何使用 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]),
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/292533.html
標籤：其他