短視訊平臺搭建,仿製一個登陸介面的demo
阿新 • • 發佈:2022-04-21
短視訊平臺搭建,仿製一個登陸介面的demo
程式執行根目錄
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
/// 根目錄 Activity ViewController
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
預設顯示的首頁面
///預設載入顯示的首頁面
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
///使用者名稱使用
late final TextEditingController _nameController = TextEditingController();
///密碼輸入框使用
late final TextEditingController _passwordController =
TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
//第一層 背景圖片
buildFunction1(),
//第二層 高斯模糊
buildFunction2(),
//第三層 登入輸入層
buildFunction3(),
],
),
),
);
}
... ... 這裡是相應的方法塊
}
顯示的一個背景圖
buildFunction1() {
return Positioned.fill(
child: Image.asset(
"images/loginbg.png",
fit: BoxFit.fill,
),
);
}
高斯模糊
buildFunction2() {
return Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: Container(
color: Colors.white.withOpacity(0.4),
),
),
);
}
登入輸入層
buildFunction3() {
return Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 300,
child: TextField(
controller: _nameController,
decoration: const InputDecoration(
hintText: "請輸入使用者名稱",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(33)),
borderSide: BorderSide(
color: Colors.grey,
),
),
),
),
),
const SizedBox(height: 20),
SizedBox(
width: 300,
child: TextField(
controller: _passwordController,
decoration: const InputDecoration(
hintText: "請輸入密碼",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(33)),
borderSide: BorderSide(
color: Colors.grey,
),
),
),
),
),
const SizedBox(height: 40),
SizedBox(
width: 300,
height: 48,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(33)),
child: ElevatedButton(
onPressed: () {
String name = _nameController.text;
String password = _passwordController.text;
print("獲取到的內容是 $name $password");
},
child: const Text("登入"),
),
),
)
],
),
);
}
以上就是 短視訊平臺搭建,仿製一個登陸介面的demo,更多內容歡迎關注之後的文章