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

作者信息

推广

Flutter 上手攻略 (下)

运用 Android Studio 创立项目

项目文件结构介绍

Lib 目录

Main 代码分析

Pubspec.yaml 配置文件分析

代码模块区分

底部 Tabbar

Main.dart 修正发动页

Root.dart

相关文章

炸了！3年图片都没了！

Flutter 3 相关介绍，包括Flutter桌面端、Flutter firebase 、Flutter游戏- 谷歌2022 I/O 大会，

不要再用Git rebase来实现线性提交历史了

Koin使用和原理分析

作者信息

推广