flutter开发手册(代码片段)

王睿丶 王睿丶     2022-12-14     598

关键词:

喜欢记得点个赞哟,我是王睿,很高兴认识大家!

1、一步一步教你安装Flutter

1.1丶 下载Flutter(SDK)

https://flutter.dev/docs/development/tools/sdk/releases#windows

1.2丶 配置环境变量

【1】
Name:ANDROID_HOME
Key:D:\\program\\Android\\SDK\\AndroidSDK

【2】
新增:D:\\program\\Flutter\\SDK\\flutter\\bin

2.3丶 在电脑上配置国内镜像

搭建环境过程中要下载很多资源文件,当一些资源下载不了的时候,可能会报各种错误。在 国内访问 Flutter 的时候有可能会受到限制。Flutter 官方为我们提供了国内的镜像

https://flutter-io.cn/
https://flutter.dev/community/china

拉到 Flutter 中文网最下面有配置方式,把下面两句配置到环境变量里面
FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn PUB_HOSTED_URL:https://pub.flutter-io.cn

2.4丶 检测是否成功

【1】 flutter doctor

第一次运行的时候会提示下面错误:

这个时候复制上面红色框框内的命令

flutterdoctor–android-licenses

注意:提示输入 Y/N 的地方全部输入 Y

2.5丶 在Android Sutdio下载Flutter插件

【1】

【2】
选择:plugins
在搜索框处,搜索:flutter,下载该插件

2.6丶 创建Flutter项目



2.7丶 创建好后会有现成的代码,这时候连接上手机即可运行

手机端连接:USB连接,允许调试,设置→其他设置→开发者选项开启→USB调试开启
第三方模拟器连接教程:https://mp.csdn.net/mdeditor/103250938#

2、社区、Flutter国内镜像

Flutter中文社区

3、将Flutter或Dart的JSON数据自动生成模型类

json_to_dart

4、图标库(Icon)

5、设计基础

效果图:

代码+注释:

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

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


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final appName = 'Custom Themes';

    return new MaterialApp(
      title: appName,
      //创建主题
      theme: new ThemeData(
        brightness: Brightness.dark,      //亮度
        primaryColor: Colors.lightBlue[800],  //主题颜色
        accentColor: Colors.cyan[600],  //其他颜色
      ),
      home: new MyHomePage(
        title: appName,
      ),
    );
  


class MyHomePage extends StatelessWidget 
  final String title;

  MyHomePage(Key key, @required this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new Container(
          color: Theme.of(context).accentColor,   //引用主题
          child: new Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    );
  

喜欢记得点个赞哟,我叫王睿很高兴认识大家!

更多原理请参考谷歌官网:
使用主题共享颜色和字体样式

FlutterIcon

6、Flutter 技术介绍

Flutter 技术介绍

7、Flutter 知识点总结-基础篇

Flutter 知识点总结-基础篇

8、Flutter 知识点总结-进阶篇

Flutter 知识点总结-进阶篇

9、Flutter 常见问题总结

Flutter 常见问题总结

喜欢记得点个赞哟,我是王睿,很高兴认识大家!

flutterflutter混合开发(flutter与native通信|完整代码示例)(代码片段)

文章目录前言一、Android端完整代码示例二、Flutter端完整代码示例三、相关资源前言前置博客:【Flutter】Flutter混合开发(Flutter与Native通信|在Flutter端实现BasicMessageChannel通信)【Flutter】Flutter混合开发(Flutter与Native通信|在Flutter端实现M... 查看详情

flutter学习-flutter开发初体验(代码片段)

Flutter学习-flutter开发初体验1.flutter项目的创建1.1创建方式1.2默认程序分析2.编写flutter代码2.1helloworld的实现2.2代码分析2.2.1runApp和Widget2.2.2Material设计风格2.3代码改进2.3.1改进界面样式2.3.2改进界面结构2.3.3进阶案例实现2.4代码重构2.... 查看详情

flutter开发问题汇总(代码片段)

记录Flutter开发中遇到的问题,下面分为安装时和开发时遇到的一些问题,便于参考.随时更新安装1.Flutter命令行敲flutter命令报错报错信息:Error:TheFlutterdirectoryisnotacloneoftheGitHubproject.ThefluttertoolrequiresGitinordertooperateproper 查看详情

flutter开发环境搭建(代码片段)

个人博客:http://www.milovetingting.cnFlutter开发环境搭建前言参考链接:https://flutterchina.club/Windows系统下Flutter开发环境搭建使用镜像由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,可以将如下环境... 查看详情

flutter混合开发(代码片段)

1、用AndroidStudio在上一篇的文档目录下创建安卓项目 FlutterHybridAndroid2、在已创建好的项目中找到,  添加setBinding(newBinding([gradle:this]))evaluate(newFile(settingsDir.parentFile,\'flutter_module/.android/include_flutter.groov 查看详情

flutterflutter混合开发(混合开发中flutter的热重启/热加载)(代码片段)

文章目录前言一、混合开发中启用Flutter的热重启/热加载二、混合开发中Flutter的热重启/热加载命令测试三、指定混合应用连接的设备四、相关资源前言上一篇博客【Flutter】Flutter混合开发(安卓端向Flutter传递数据|FlutterFragment数据... 查看详情

flutter开发初探(代码片段)

目前跨端开发比较热门的就是ReactNative和Flutter了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说,基于web生态的ReactNative应该是一个更加顺畅而自然的选择;但Flutter让人动心的地方就是高性能和跨端... 查看详情

框架:flutter(移动应用程序开发框架)(代码片段)

ylbtech-框架:Flutter(移动应用程序开发框架)Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter... 查看详情

flutter混合开发:android中如何启动flutter(代码片段)

目录现有项目中引入Flutter启动flutter页面加速启动启动传参 flutter可以独立完成项目,但是在现有项目情况下最好的方式就是混合开发,逐步过渡。这样就会共存native和flutter代码,而其中最关键的就是native如何启动flu... 查看详情

flutter--实战在macos上搭建flutter开发环境(代码片段)

文章目录环境搭建一、准备二、下载FlutterSDK三、环境变量配置四、安装Flutter插件(FlutterPlugin)五、环境检查新建项目1.AndroidStudio创建Flutter工程2.工程结构解析3.实例代码解析4.使用第三方功能库环境搭建一、准备要安装... 查看详情

flutter混合开发:android中如何启动flutter(代码片段)

简介: flutter可以独立完成项目,但是在现有项目情况下最好的方式就是混合开发,逐步过渡。这样就会共存native和flutter代码,而其中最关键的就是native如何启动flutter页面,及flutter与native如何交互。本文以An... 查看详情

错误记录flutter混合开发获取binarymessenger报错(flutteractivityandfragmentdelegate.getflutterengine())(代码片段(代码片段)

文章目录一、报错信息二、解决方案一、报错信息在Flutter混合开发中,开发Android与Flutter信息交互功能;创建BasicMessageChannel通道,其构造函数如下:publicBasicMessageChannel(@NonNullBinaryMessengermessenger,@NonNullStringname,@NonNullMessageCod 查看详情

flutter插件开发之flutterchannel:flutter调用android与android调用flutter(代码片段)

Android代码:import'dart:async';import'package:flutter/cupertino.dart';import'package:flutter/material.dart';import'package:flutter/services.dart';typedefvoidEventCallback 查看详情

flutter开发flutter包和插件(开发dart插件包|发布dart插件包)(代码片段)

...Dart包推送到中央仓库中八、博客资源前言上一篇博客【Flutter】开发Flutter包和插件(Flutter包和插件简介|创建Flutter插件|创建Dart包)三、创建Dart包1、AndroidStudio中可视化创建中,创 查看详情

flutterflutter混合开发(简介|flutter混合开发集成步骤|创建fluttermodule)(代码片段)

文章目录一、Flutter混合开发简介二、Flutter混合开发集成步骤三、创建FlutterModule1、使用命令行创建FlutterModule项目(仅做参考)2、AndroidStudio中创建FlutterModule(推荐)3、FlutterModule项目文件结构四、相关资源一、Flutter混合开发简介开发... 查看详情

flutter与原生混合开发(代码片段)

  在说flutter与原生的混合开发之前,先和初学flutter的小伙伴提个建议,建议大家刚开始的时候先在纯flutter的项目上练习flutter的相关技术,等练习的差不多了,再练习flutter与原生的交互。主要原因是:与原... 查看详情

[flutter]windows平台flutter开发环境搭建(andoridstudio)(代码片段)

前两天网友在群里说起了Flutter,就了解了一下,在手机上跑了它的demo,正接就被打动了。虽然网上有很多教程,但真正开始的时候,还是会碰到很多坑。下面详细的讲解Flutter+AndroidStudio开发环境搭建。 1.下载AndroidStudio网址... 查看详情

flutter学习之混合开发(代码片段)

Flutter学习之混合开发1.调用原生功能1.1Camera(已有三方插件支持直接调用)1.1.1添加依赖1.1.2平台配置1.1.3代码实现1.2电池信息(没有三方插件支持,需要编写原生代码)1.2.1平台通过介绍1.2.2创建测试项目1.2.3... 查看详情