Flutter 上手攻略 (下)-六虎

前言: 在上一篇文章里，我介绍了怎么去建立 Flutter 开发环境。那么这一篇文章里，我将会带咱们运用 Flutter 编写一个 APP。 Flutter 运用的语言是 Dark，不是这文章的要点，不会作详解。另外，Flutter 是谷歌的移动 UI 结构，能够快速在 iOS 和 Android 上构建高质量的原生用户界面。

运用 Android Studio 创立项目

我这儿运用 Android Studio 创立项目，当然也能够用 VS Code，都是相同，看个人习惯。

File -> New -> New Flutter Project

Flutter Application

APP 设置

4.包名，最终 Finish 创立项目

项目文件结构介绍

Lib 目录

就是咱们寄存代码的地方，main.dart 是进口文件。

Main 代码分析

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // 此 widget 是应用程序的进口，承继 StatelessWidget 与 StatefulWidget 的 widget 都是 build 方法开端
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是 android 风格的 App 进口，当然咱们也能够用 iOS 风格的 CupertinoApp.
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 主题
        primarySwatch: Colors.blue,
        // 视觉密度
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // 发动的主页
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
// ... 后面的咱们先不看，等下都要删掉。

Pubspec.yaml 配置文件分析

// name 很重要，假如修正了 name 一切的 dart 的文件的 import 前引证的本地文件包名都需求修正。要注意的是，手机显示的 APP 名字，不是在这儿修正，必须在 iOS 和 Andriod 项目原生文件上修正才有作用。
name: flutter_app
description: A new Flutter application.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
// 软件版别号
version: 1.0.0+1
environment:
  sdk: ">=2.7.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  // 在这儿增加第三方 packages 的库文件，^表明适配和当时大版别一致的版别，~表明适配和当时小版别一致的版别， flutter get 下载。
  cupertino_icons: ^0.1.3
dev_dependencies:
  flutter_test:
    sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
	# 增加资源，不单单是图片，images 是个和 pubspec.yaml 配置文件同级的目录，假如不同级，需求增加..
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
	# 字体设置
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

最终，编译运转一下，看看能不能运转。

假如能运转上面的画面，那么就证明运转成功了。

代码模块区分

Assets 寄存资源文件，比方图片，字体文件等

Common 寄存一些公共的类，比方 api， values ，global 等

Models 寄存数据模型类

Provide 寄存状况管理

Routes 寄存路由文件

Service 寄存事务类，处理网络数据

Utils 寄存工具类，比方 dio_manager, helper, sp_util 等

views 寄存视图类, 里面按模块等区分

Main 是进口文件

底部 Tabbar

如上图，咱们要做的作用是这样的，点下面 ”设备”时切换设备页面，点“我”时切换我页面。

如上图，在项目文件 views 里增加 home、mine 文件夹与文件 home.dart 与 mine.dart 还有 root.dart

Main.dart 修正发动页

import 'package:defensor/views/root.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Defensor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // 这儿修正 Root 为发动页
      home: Root(),
    );
  }
}

Root.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'home/home.dart';
import 'mine/mine.dart';
class Root extends StatefulWidget {
  @override
  _RootState createState() => _RootState();
}
class _RootState extends State<Root> {
  final List tabPages = [Home(), Mine()];
  int selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _dialogExitApp,
      // Scaffold 方便脚手架做页面， bottomNavigationBar 能够设置底部导航栏
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('设备'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_box),
              title: Text('我'),
            ),
          ],
          onTap: (index){
            setState(() {
              this.selectedIndex = index;
            });
          },
          currentIndex: selectedIndex,
        ),
        body: tabPages[selectedIndex],
      ),
    );
  }
  /// 单击提示退出
  Future<bool> _dialogExitApp() {
    return showDialog(
        context: context,
        builder: (context) => AlertDialog(
          content: Text("是否退出"),
          actions: <Widget>[
            FlatButton(onPressed: () => Navigator.of(context).pop(false), child:  Text("取消")),
            FlatButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: Text("确认"))
          ],
        ));
  }
}

Home.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar 是上部导航栏
      appBar: AppBar(title: Text('设备')),
      // body 是主体内容
      body: Center(
        child: Text('设备'),
      ),
    );
  }
}

Mine.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Mine extends StatefulWidget {
  @override
  _MineState createState() => _MineState();
}
class _MineState extends State<Mine> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('我')),
      body: Center(
        child: Text('我'),
      ),
    );
  }
}

至此，以上根本已经建立好一个根本 Flutter APP 了。当然，这儿还有很多东西，比方路由类的封装，网络工具类的封装等等。这些都要一步一步完善起来。

原创文章，转发请注明，谢谢～

Flutter 上手攻略 (下)

运用 Android Studio 创立项目

项目文件结构介绍

Lib 目录

Main 代码分析

Pubspec.yaml 配置文件分析

代码模块区分

底部 Tabbar

Main.dart 修正发动页

Root.dart

相关文章

在React Native项目中配置高德地图

戴着 Vision Pro 录完这期节目，才明白“生活”才是 Killer App｜编码人声

SpringBoot集成ChatGPT实现AI聊天

掌握字符与字符串：C语言中的神奇函数解析(三）

作者信息