配置完鸿蒙版本的Flutter后，让我们开始创建第一个Flutter鸿蒙化的demo吧！

---

前言

上一篇文章教大家如何在Windows环境下配置Flutter鸿蒙化环境，Flutter鸿蒙化环境配置（windows）
本次带大家创建一个自己的Demo

---

一、创建新的Flutter模板

1.1 创建一个存放项目的文件夹，文件夹内打开终端，执行命令：

flutter create 项目名

以下是创建成功后的提示

1.2 用VsCode打开刚创建的demo

lib下的main.dart文件就是入口文件

二、开始运行项目

要开发鸿蒙项目需要在Dev Eco打开ohos文件夹

2.1 打开DevEco

找到demo文件下的ohos目录，这就是鸿蒙端的位置，右键使用DevEco打开

等待项目初始化配置完成
以下是打开的例图：

注意这里会有报错，但不用慌，这是正常现象

2.2 配置签名

我们先登录自己的华为账号，开启模拟器或者链接真机，然后配置自动签名

注意这里改成API17好一点

开始自动签名

2.3 运行项目

回到VsCode，右下角会显示已经配对的真机或模拟器

我这里是链接了真机，如图：

打开控制台

Ctrl+`

终端输入

打包命令 flutter build hap --debug
开始运行 flutter run 

打包完成如下：

开始运行，如下是DevEco Testing的截图

三.添加内容

3.1 添加代码

在lib文件夹下创建如图路径

pages/Contants/contants_page.dart
pages/Home/home_pages.dart
pages/Moments/moments_page.dart
pages/Profile/profile_page.dart

home_pages.dart

import 'package:flutter/material.dart';
// import './moments_page.dart';
class HomePage extends StatelessWidget{
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('首页',style: TextStyle(fontSize:24)),
        ],
      )
    );

  }
}

contants_page.dart

import 'package:flutter/material.dart';

class ContantsPage extends StatelessWidget{
  const ContantsPage({super.key});
  @override
  Widget build(BuildContext context) {
   return const Center(
    child: Text('演出',style: TextStyle(fontSize: 24),),
   );
  }
}

moments_page.dart

import 'package:flutter/material.dart';

class MomentsPage extends StatelessWidget {
  const MomentsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('票夹', style: TextStyle(fontSize: 24)),
    );
  }
}

profile_page.dart

import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('我的', style: TextStyle(fontSize: 24)),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:demo/pages/Contants/contants_page.dart';
import 'package:demo/pages/Home/home_pages.dart';
import 'package:demo/pages/Moments/moments_page.dart';
import 'package:demo/pages/Profile/profile_page.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen>createState()=>_MainScreenState();
}
class _MainScreenState extends State<MainScreen>{
  int _currentIndex = 0;
  final List<Widget> _page = const[
    HomePage(),
    ContantsPage(),
    MomentsPage(),
    ProfilePage(),
  ];
  final List<BottomNavigationBarItem> _navBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      activeIcon: Icon(Icons.home,color: Colors.blue),
      label: '首页'
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.contacts_outlined),
      activeIcon: Icon(Icons.contacts, color: Colors.blue),
      label: '演出',
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.people_outline),
      activeIcon: Icon(Icons.people, color: Colors.blue),
      label: '票夹',
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.person_outline),
      activeIcon: Icon(Icons.person, color: Colors.blue),
      label: '我的',
    ),
  ];
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text(_getAppBarTitle()),
      ),
      body: _page[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
       items: _navBarItems,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index; // 更新当前索引
          });
        },
        type: BottomNavigationBarType.fixed, // 固定样式（支持4个以上）
        selectedItemColor: Colors.blue, // 选中项颜色
        unselectedItemColor: Colors.grey, // 未选中项颜色
      ),
    );
  }
  // 根据当前索引返回AppBar标题
  String _getAppBarTitle() {
    switch (_currentIndex) {
      case 0: return '首页';
      case 1: return '演出';
      case 2: return '票夹';
      case 3: return '我的';
      default: return '我的应用';
    }
  }
}

3.2 运行结果展示

底部tab栏可点击，显示对应的选中颜色

3.3 额外注意点

如果需要移除右上角的debug标签，可在main.dart文件MyApp内加上

debugShowCheckedModeBanner: false,

具体代码如下

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

结果如图

---

总结

本篇我们讲了如何运行第一个flutter鸿蒙项目，未来主要开发在lib文件里，其主要使用Dart语言进行开发，现在的相关资料也挺稀缺的，所以赶快来试试吧！