ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Flutter for web 最新填坑,kotlin教学

2022-02-05 13:29:59  阅读:247  来源: 互联网

标签:web Flutter kotlin dart 填坑 main flutter sdk


代码文件路径: packages/flutter/lib/src/foundation/constants.dart

你可以通过下面方式来区分web还是io,哈哈哈,这是隐形的吐槽 js吗?

/// A constant that is true if the application was compiled to run on the web.
///
/// This implementation takes advantage of the fact that JavaScript does not
/// support integers. In this environment, Dart’s doubles and ints are
/// backed by the same kind of object. Thus a double 0.0 is identical
/// to an integer 0. This is not true for Dart code running in AOT or on the
/// VM.
const bool kIsWeb = identical(0, 0.0);

Goolge开发者大会上,发布了Flutter 1.9,更新内容很多,其中一项就是Web sdk 合入了Flutter sdk。也就是说我们可以真正做到一套代码打包android/ios/web/桌面(mac,windows,linux). 下面请跟着我走一边坑。

开启web支持

命令 flutter config --enable-web 开启之后,我们可以看到device中多了Chrome和Server的web选项。

转换旧的flutter_web项目

如果你之前没有使用package:flutter_web,那直接跳到新建一个flutter web app

官方wiki地址 Upgrading from package:flutter_web to the Flutter SDK

main.dart

旧的项目在web文件夹下面自动生成了一个main.dart

里面主要做的事情是webOnlyInitializePlatform初始化,这个代码跟桌面版本是相似的,并且引导lib下面的main.dart的入口

import ‘package:flutter_web_ui/ui.dart’ as ui;
import ‘package:json_to_dart/main.dart’ as app;

main() async {
await ui.webOnlyInitializePlatform();
app.main();
}

在新的web中,不再需要设置,而且web文件夹里面也不需要这个main.dart了。

我们随便看一下桌面版本的设置

void main() {
// See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

引用

从web sdk转换为flutter sdk

字体

之前会发现,flutter for web里面的一些icon全部都不能显示。官方也解释了,之前的web demo其实没有将icon的字体文件加入,自然是不显示。最终的产物中就会有FontManifest.json文件来指示字体文件

flutter:
uses-material-design: true

assets

之前的assets 你需要写在web文件夹下面才能生效,现在资源文件跟Flutter使用使用是一样的了。

引用

引用终于统一了,开心

运行

命令从 webdev serve或者 pub run build_runner serve 变成了flutter run -d chrome

新建一个flutter web app

官方wiki地址Building a web application with Flutter

sdk 1.9

首先我们要确保Flutter sdk 大于等于1.9 执行命令 flutter config --enable-web,如果报错,说明sdk不对。 再执行flutter devices

有Chrome,说明ok了

创建

我们可以先创建一个Flutter 应用,然后再执行flutter create .就会生成一个web的文件夹,包含index.html文件

注意命令后面有一个点

运行

资源分享

一线互联网面试专题

379页的Android进阶知识大全

379页的Android进阶知识大全

点击:

**《Android架构视频+BAT面试专题PDF+学习笔记​》**即可免费获取

网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

%BC%81.md)》**即可免费获取

网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

2020年虽然路途坎坷,都在说Android要没落,但是,不要慌,做自己的计划,学自己的习,竞争无处不在,每个行业都是如此。相信自己,没有做不到的,只有想不到的。祝大家2021年万事大吉。

标签:web,Flutter,kotlin,dart,填坑,main,flutter,sdk
来源: https://blog.csdn.net/m0_66264673/article/details/122789809

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有