效果:
文件结构:
login页面代码:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
//继承StatefulWidget类,表示它是一个有状态的组件
const LoginPage({Key? key}) : super(key: key);
@override
_LoginPageState createState() =>
_LoginPageState(); //如果集成StatelessWidget类,这里就该是Widget build(BuildContext context)
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
//构建UI,写控件的地方
return Theme(
data: ThemeData(),
child: Scaffold(
body: _buildPageContent(),
),
);
}
Widget _buildPageContent() {
return Container(
color: const Color.fromARGB(255, 148, 200, 207),
child: ListView(
children: <Widget>[
const Center(
child: Text("欢迎使用本系统",
style: TextStyle(fontSize: 18, color: Colors.black),
textScaleFactor: 3.2 //缩放倍数,没有这个字会很小
)),
const SizedBox(height: 20.0),
const SizedBox(height: 20.0),
],
),
);
}
}
入口文件:
import 'package:flutter/material.dart';
import 'package:flutter_app/login/login.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
final routes = <String, WidgetBuilder>{
"/login/login.dart": (context) => LoginPage(),
};
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '登录Demo',
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primarySwatch: Colors.lightBlue,
),
home: LoginPage(),
);
}
}
说明记录