Flutter 基础（一）入门

2023年7月5日 231次阅读 来源: danfengw

介绍

flutter 应用是使用dart语言开发的，作为一个跨平台框架，flutter非常像React Native ，
(1)比如flutter支持响应式编程和声明式编程。但是和React Native不同的是，flutter不需要JavaScript桥接，打打提升了整个应用的性能和应用启动时间，Dart是通过AOT技术取得了上述表现。
(2)另一方面，拥有JIT的Flutter 支持在开发期间，不需要从头构建整个应用就可以刷新ui，提高开发效率。
(3)flutter框架是建立在组件思想之上的，一切皆组件。在flutter中组建不单单指应用视图，而是整个界面甚至是整个应用。

特点

跨平台性：Liunx Android IOS Fuchsia
原生用户界面：它是原生的，体验跟性能更好
flutter是完全免费、开源的
flutter具有120fps的超高性能，因为我们原生的渲染一般使用的是CPU渲染而flutter使用的是GPU渲染，也就是说flutter有可能比原生app渲染的更快。

这里简单说下flutter与React Native的对比，Reat Native是将ui通过RN自己的虚拟机DOM转换为原生的ui，这样的转换对性能是有一定影响的，这也就是RN在list列表相关显示方面的缺陷，但RN总体上性能还是可以的，而flutter在渲染技术上选择了自己实现（GDI），flutter使用Skia 2D渲染引擎直接在GDI层面绘制页面和控件，对系统的依赖降低到最低，提供更好的跨平台兼容性和更高的性能。

环境搭建

参考：https://flutter.dev/docs/get-started/install

第一个应用

（1）import 导包
（2）main函数进入，一切皆组件，runApp方法返回MyApp组件
（3）MyApp组件继承自StatelessWidget，重写build方法，build方法中需要参数BuildContext。
（4）build方法内部又返回了MaterialApp这个组件及其他子组件。

import 'package:flutter/material.dart'; //导入flutter推荐的ui组件，material样式

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Hello flutter",
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello world"),
        ),
        body: Center(
          child: Text("hello world"),
        ),
      ),
    );
  }
}

补充

flutter插件包查找网址：https://pub.dev/packages

    原文作者：danfengw
    原文地址: https://blog.csdn.net/danfengw/article/details/88543880
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞