前言

截至目前,字节跳动有很多业务落地了 Flutter 技术方案,包括今日头条、西瓜视频、皮皮虾等 20 多个业务在使用 Flutter 开发,有纯 Flutter 工程,也有 Flutter 与 Native 的混合工程。

字节跳动选择 Flutter 的初心

与其说Flutter是大前端技术,不如说是大移动端技术。Flutter 发展的 Roadmap 也是先全面支持 Android/iOS 端能力,再进一步完善 Web 端能力支持的。

字节跳动对于客户端技术还是非常重视的,字节跳动有很多客户端工程师,之前客户端深入点的基础技术更多是搞插件化、热修复、性能优化、安全加固等,跨平台方向一直都是前端工程师在不遗余力地推进,属于大前端方向。而 Flutter 是客户端更有主导的跨平台技术方案。

在字节跳动,跨平台技术并没有形成大规模的落地,也没有历史包袱,所以在面对跨平台技术选型的时候,更关注跨平台技术的技术上限以及发展潜力,自渲染技术的 Flutter 可以理解为更彻底更纯粹的跨平台技术,伴随着媲美原生的流畅度,这便是我们选择 Flutter 的初心。

现在越来越多的业务和团队开始尝试 Flutter 技术栈,作为一名开发人员,掌握Flutter的使用是非常有必要的,特别是像阿里、腾讯等公司都使用广泛,那么如何能够达到“精通”Flutter的程度?今天就来好好谈谈。

简单介绍一下这份Flutter技术进阶笔记,每个章节都是深入解析了源码底层在PDF里边有。为了让大家更好的学习Flutter技术,我也是第一时间展示给大家了!

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

第一章 为什么Flutter是跨平台开发的终极之选

跨平台开发是当下最受欢迎、应用最广泛的框架之一。能实现跨平台开发的框架也五花八门,让人眼花缭乱。

最流行的跨平台框架有 Xamarin、PhoneGap、Ionic、Titanium、Monaca、Sencha、jQuery Mobile、React native、Flutter 等等。但这些工具的表现也是高低有别,各有千秋。

在这些流行的框架中,有很多也已经消失在了历史的长河中被人渐渐遗忘了。但 React native 和 Flutter 这俩框架地位依旧坚挺,备受欢迎。

因为它们俩分别由最强大的科技巨头 Facebook 和谷歌背书支持。

第二章 在Windows上搭建Flutter开发环境

  • 使用镜像
  • 系统要求
  • 获取Flutter SDK
  • 编辑器设置
  • Android设置
  • 起步: 配置编辑器
  • 起步: 体验
  • 体验热重载

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

第三章 编写您的第一个 Flutter App

第1步: 创建 Flutter app

创建一个简单的、基于模板的Flutter应用程序,按照[创建您的第一个Flutter应用中的指南的步骤, 然后将项目命名为startup_namer(而不是myapp),接下来你将会修改这个应用来完成最终的APP。

在这个示例中,你将主要编辑Dart代码所在的lib/main.dart 文件,

提示: 将代码粘贴到应用中时,缩进可能会变形。您可以使用Flutter工具自动修复此问题:

Android Studio / IntelliJ IDEA: 右键单击Dart代码,然后选择Reformat Code with dartfmt.

VS Code: 右键单击并选择Format Document.

Terminal: 运行flutter format <filename>.

1.替换 lib/main.dart. 删除lib / main.dart中的所有代码,然后替换为下面的代码,它将在屏幕的中心显示“Hello World”.

import'package:flutter/material.dart';
voidmain()=>runApp(newMyApp());
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnnewMaterialApp(
title:'Welcome to Flutter',
home:newScaffold(
appBar:newAppBar(
title:newText('Welcome to Flutter'),
),
body:newCenter(
child:newText('Hello World'),
),
),
);
}}

2.运行应用程序,你应该看到如下界面.

分析

本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。

main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。

该应用程序继承了 StatelessWidget,这将会使应用本身也成为一个widget。 在Flutter中,大多数东西都是widget,包括对齐(alignment)、填充(padding)和布局(layout)

Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。

widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。

本示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心。

第2步: 使用外部包(package)

在这一步中,您将开始使用一个名为english_words的开源软件包 ,其中包含数千个最常用的英文单词以及一些实用功能.

您可以 在pub.dartlang.org上找到english_words软件包以及其他许多开源软件包

1.pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,将english_words(3.1.0或更高版本)添加到依赖项列表,如下面高亮显示的行:

dependencies:
flutter:
sdk: flutter cupertino_icons:^0.1.0
english_words:^3.1.0

2.在Android Studio的编辑器视图中查看pubspec时,单击右上角的 Packages get,这会将依赖包安装到您的项目。您可以在控制台中看到以下内容:

flutter packages get
Running "flutter packages get"in startup_namer...
Process finished with exit code 0

3.在 lib/main.dart 中, 引入 english_words, 如高亮显示的行所示:

import'package:flutter/material.dart';import'package:english_words/english_words.dart';

在您输入时,Android Studio会为您提供有关库导入的建议。然后它将呈现灰色的导入字符串,让您知道导入的库尚未使用(到目前为止)

4.使用 English words 包生成文本来替换字符串“Hello World”.

Tip: “驼峰命名法” (称为 “upper camel case” 或 “Pascal case” ), 表示字符串中的每个单词(包括第一个单词)都以大写字母开头。所以,“uppercamelcase” 变成 “UpperCamelCase”
进行以下更改, 如高亮部分所示:

import'package:flutter/material.dart';import'package:english_words/english_words.dart';
voidmain()=>runApp(newMyApp());
classMyAppextendsStatelessWidget{
@override
Widget build(BuildContext context){
final wordPair =new WordPair.random();
returnnewMaterialApp(
title:'Welcome to Flutter',
home:newScaffold(
appBar:newAppBar(
title:newText('Welcome to Flutter'),
),
body:newCenter(
//child: new Text('Hello World'),
child:newText(wordPair.asPascalCase),
),
),
);
}}

5.如果应用程序正在运行,请使用热重载按钮新正在运行的应用程序。每次单击热重载或保存项目时,都会在正在运行的应用程序中随机选择不同的单词对。 这是因为单词对是在build 方法内部生成的。每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时build 都会运行.

遇到问题?

如果您的应用程序运行不正常,请查找是否有拼写错误。如果需要,使用下面链接中的代码来对比更正。

· pubspec.yaml (The pubspec.yaml file won’t change again.)

· lib/main.dart

第3步: 添加一个有状态的部件(Stateful widget)

第4步: 创建一个无限滚动ListView

第5步: 添加交互

第6步: 导航到新页面

第7步:使用主题更改UI

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

第四章 Flutter开发环境搭建和调试

  • 模拟器的安装与调试
  • 开发环境的搭建

第五章 Dart语法篇之基础语法(一)

1.Hello Dart
2.数据类型
3.变量和常量
4.集合(List、Set、Map)
5.流程控制
6.运算符
7.函数

第六章 Dart语法篇之集合的使用与源码解析(二)

1.List
2.Set
3.Map
4.Queue
5.LinkedList
6.HashMap
7.Map、HashMap、LinkedHashMap、SplayTreeMap区别
8.命名构造函数from和of的区别以及使用建议

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

第七章 Dart语法篇之集合操作符函数与源码分析(三)

这一节的内容更实用,绝对可以提高你的 Flutter 开发效率的函数,那就是集合中常用的操作符函数。这次说的内容的比较简单就是怎么用,以及源码内部是怎么实现的。

1.Iterable<E>
2.forEach使用方式及源码分析
3.map使用方式及源码分析
4.any使用方式及源码分析
5.every使用方式及源码分析
6.where使用方式及源码分析
......

第八章 Dart语法篇之函数的使用(四)

1.函数参数
2.匿名函数(闭包,lambda)
3.箭头函数
4.局部函数
5.顶层函数和静态函数
6.main函数
7.Function函数对象

第九章 Dart语法篇之面向对象基础(五)

1.属性访问器(accessor)函数setter和getter
2.面向对象中的变量
3.构造函数
4.抽象方法、抽象类和接口
5.类函数

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

第十章 Dart语法篇之面向对象继承和Mixins(六)

本章我们继续探索Dart中面向对象的重点和难点(继承和mixins)。mixins(混合)特性是很多语言中都是没有的。

本篇主要涉及到 Dart 中的普通继承、mixins 多继承的形式(实际上本质并不是真正意义的多继承)、mixins 线性化分析、mixins 类型、mixins 使用场景等。

第十一章 Dart语法篇之类型系统与泛型(七)

1.可选类型
2.接口类型
3.泛型
4.类型具体化

第十二章 Flutter中的widget

1.Flutter页面-基础Widget
2.Widget
3.StatelessWidget
4.State生命周期
5.基础widget

笔记内容全部免费分享,有需要完整版笔记的小伙伴【点击我】免费获取哦!

最后

在现阶段,开始尝试探索和积累沉淀 Flutter 技术能力,并在业务上使用 Flutter 技术的应用,从战略上来将已经处于领先。

选择 Flutter,正可谓是“进可攻退可守”,往前进一步,Flutter 应用未来可无缝迁移到 Fuchsia 系统,借用 Fuchsia 系统的能量扩展到更广泛的用户场景;退一步,Flutter 技术自身在 Android/iOS 平台的表现相比其他跨平台技术已经是很优秀。

技术在不断演变中螺旋前进,平台自身也随之演进,未来 Flutter 会朝着多端一体化的方向发展,能支持更多的端(包括平板、笔记本、智能设备等)。

作为一套跨平台的 UI 框架,Flutter 采用自渲染的技术方案,是一个上限很高的跨平台技术,但 Flutter 更重要的是需要提升工程化能力以及生态圈的建设,才能吸引更多的开发者加入。

双倍NB!字节跳动资深研发花7天肝出的这份286页“Flutter技术进阶”的更多相关文章

  1. 字节跳动Android实习面试难吗,应该如何应对?

    字节跳动的面试难不难其实很难去非常准确的定义,但是能肯定的一点是,字节跳动的面试题都很有水平,真正考察了该岗位在以后工作中需要的能力. 大学学的Java后面又自学Android方向,跟着老师在实验室做 ...

  2. 一份热乎的字节跳动客户端面经,已拿Offer

    字节面试过程: 4月4号进行内推,7天的简历评估,11号接到电话面试,尽管猝不及防回答仓促,但好在前期准备充分,通过.14号现场面试,次日收到通知,通过,二面.三面都很顺利.20号进行HR面,26号收 ...

  3. 合并K个有序数组(链表)【字节跳动面试算法题】

    本题是本人字节跳动一面考的算法题原题是有序数组,一时没想到怎么解决数组的问题,但是如果给的是有序链表数组,则可以用下面的方法解决 可以利用最小堆完成,时间复杂度是O(nklogk),具体过程如下: 创 ...

  4. HDU 6467.简单数学题-数学题 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    简单数学题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  5. HDU 6464.免费送气球-动态开点-权值线段树(序列中第first小至第second小的数值之和)(感觉就是只有一个状态的主席树) (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    免费送气球 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  6. HDU 6463.超级无敌简单题-卡边界的暴力 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)

    超级无敌简单题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  7. 不等"金九银十",金风八月,我早已拿下字节跳动的offer

    字节跳动,我是在网上投的简历,之前也投过一次,简历都没通过删选,后来让师姐帮我改了一下简历,重新投另一个部门,获得了面试机会.7月23日,中午HR打电话过来预约了下午4点半面试,说会在线写代码,让我准 ...

  8. 朋友的一年工作经验跳槽字节跳动社招经历分享(已拿offer)

    虽然已经临近年末,但是还是萌生要看新机会的想法,主要的原因是觉得在目前的岗位上技术增长遇到的瓶颈,因此想去做一些更有挑战的工作.因为仍然准备继续在深圳工作,因此选定了三家公司,腾讯.字节跳动和 sho ...

  9. 【北京/上海/南京】【部门直推】【可查询】【实习&社招】字节跳动数据平台前端内推

    [北京/上海/南京][部门直推][可查询][实习&社招]字节跳动数据平台前端内推 重要信息,写在前面  [投递邮箱]chengxinsong@bytedance.com [微信扫码] 2019 ...

随机推荐

  1. 常见DDoS攻击

    导航: 这里将一个案例事项按照流程进行了整合,这样观察起来比较清晰.部分资料来自于Cloudflare 1.DDoS介绍 2.常用DDoS攻击 3.DDoS防护方式以及产品 4.Cloudflare ...

  2. Redis的事务不是原子性的

    1.事务的四大特性 原子性(Atomicity):化学中的原子指不可再分的基本微粒,数据库中原子性强调事务是一个不可分割的整体,事务开始后所有操作要么全部成功,要么全部失败,不可能停滞在中间某个环节. ...

  3. Java数据库开发(二)之——DBCP连接数据库

    1.载入jar包 DBCP需要以下几个jar包,可到apache及mysql的官网下载 2.程序编写 public static BasicDataSource ds = null; static f ...

  4. [Django REST framework - 自动生成接口文档、分页]

    [Django REST framework - 自动生成接口文档.分页] 自动生成接口文档 # 后端人员写好接口,编写接口文档,给前端人员看,前端人员依照接口文档开发 # 公司里主流 -后端,使用w ...

  5. Linux:Linux更新yum方法

    [内容指引]进入目录:cd查看目录下的内容:ls重命名备份:mv从网络下载:wgetyum更新:yum update 第一次运行yum安装软件前,建议更新yum. 1.进入yum源目录 命令: cd ...

  6. (转) PHP实现从1累加到100(1+2+….+100=)的几种思路,挺有意思的!!!

    一个经典的小学问题也是一个简单的PHP小应用,1+2+3--100=多少?使用PHP应该怎么写? 这里总结了以下几种思路: 1.普通PHPer: $sum=0;for($i=1;$i<=100; ...

  7. easyui的combobox的onChange事件的实现

    easyui的combobox的onChange事件的实现,直接上代码: <div style="display:inline;margin-left:15px;"> ...

  8. python 17篇 unittest单元测试框架

    单元测试:开发程序的人自己测试自己的代码 unittest自动化测试框架 1.单元测试 import unittest def add(a,b): return a+b # 在运行时不要用run un ...

  9. python使用笔记006-函数+json操作

    一.函数 函数:提高代码的复用性 1.1 函数的定义 1 def hello(): 2 print('hello') 3 print('fdsfjslkfs') 4 5 #函数不调用就不会执行 6 h ...

  10. Linux相关网络命令大全 网络接口 域名分析

    Linux网络设置一.查看网络接口信息ifconfig① 查看所有活动的网络接口信息② 查看指定网络接口信息补充二.查看主机名称hostname① hostname命令② 永久设置主机名三.查看路由表 ...