Flutter实践之从零开始

最新推荐文章于 2025-10-17 17:07:30 发布

原创最新推荐文章于 2025-10-17 17:07:30 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios #react

本文介绍Flutter——Google的开源移动UI框架，用于快速构建高质量的原生界面。覆盖环境配置、基本代码示例及项目实践，揭示Flutter如何简化开发流程，尤其适合iOS和Android跨平台应用。

概述

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作，并且Flutter是完全免费、开源的。
Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI，如果熟悉RN的话，上手应该会比较快，现在已经有1.0.0稳定版本了，可以去看官网文档。

笔者最近几天对比文档和一些开源项目，仿照网易云音乐，捣鼓了一些简单的界面。

环境配置

笔者工作系统是：ubuntu 16.0.4，下载flutter_linux_v1.0.0-stable版本，解压，配置SDK路径。

启动Android Studio后安装两个必要的插件Dart和Flutter如下

开始实践

和普通应用类似，配置好你的包名

主要目录结构如下所示：

原工程生成的源代码很多，笔者这里去掉了，以一个最简单的形式来展示，后续再来逐步添砖加瓦

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World!'),
        ),
      ),
    );
  }
}

项目地址：
https://github.com/byhook/mike-music

小结

这节内容只是简单记录一下开始的过程，文章开头也说到了，Flutter是Google开源的移动UI框架，因此在界面方面，你可以理解为，一个人可以完成两个人的事情，有比较大的优势，但是要知道对于音视频领域等专业领域，势必会强依赖于原生，而Flutter在这方面显然是乏力的，后续内容也会逐步探索实践。