创建项目
使用IDEA创建Flutter项目
创建页面
新建pages文件夹进行页面存放
目录结构
-lib
|- pages
|- - directory 通讯录页面文件夹
|- - - directory.dart 通讯录主页面
|- - discover 发现页面文件夹
|- - - directory.dart 发现页主页面
|- - home 我的页面文件夹
|- - - directory.dart 我的主页面
|- - index 首页页面文件夹
|- - - directory.dart 首页主页面
|- - message 消息页面文件夹
|- - - directory.dart 消息主页面
|- main.dart 程序入口
通讯录主页面
import 'package:flutter/material.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("通讯录"),
);
}
}
发现页主页面
import 'package:flutter/material.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("发现"),
);
}
}
我的主页面
import 'package:flutter/material.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("我的"),
);
}
}
首页主页面
import 'package:flutter/material.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("首页"),
);
}
}
消息主页面
import 'package:flutter/material.dart';
class DirectoryPage extends StatefulWidget {
const DirectoryPage({Key? key}) : super(key: key);
@override
State<DirectoryPage> createState() => _DirectoryPageState();
}
class _DirectoryPageState extends State<DirectoryPage> {
@override
Widget build(BuildContext context) {
return const Center(
child: Text("微信"),
);
}
}
程序入口
import 'package:flutter/material.dart';
import 'package:pseudo_we_chat/pages/index/index.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const IndexPage());
}
}
注意:
如果测试代码出现错误,请先注释掉。
预览
目前只显示首页,因为未配置导航栏