Flutter伪微信-001-初始化项目

180 阅读1分钟

创建项目

使用IDEA创建Flutter项目

image.png

创建页面

新建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());
  }
}

注意:

如果测试代码出现错误,请先注释掉。

预览

目前只显示首页,因为未配置导航栏

image.png

项目链接

github.com/BadKid90s/p…