Flutter 笔记

Stella981 等级 74 0 0

最近开发需要,要接触移动端一些东西,所以看一下flutter。 因为移动端经常是要做一样事情就是即要有android平台,又要有ios平台,所以,选择了Flutter。 为什么不是React Native?因为,Flutter字比较少,而且不用打空格,我喜欢。

一、安装

  1. 下载
  2. 解压
  3. 设置path
  4. 开始

二、概念

  1. Flutter 一切都是widget,一个页面基本就是一根大树。
  2. Flutter的机制类似React或者Vue,所以,开发起来比较容易,只需要改数据即可,UI会根据数据的变更而变更,这一点是我喜欢的。

三、Widget类型

widget 有两种类型:

  1. 实际显示类型,一般有文字、图片等
  2. 布局类型,主要是看不见的,用于设置实际显示类型widget布局属性的widget,例如padding和margin。举个例子,一个实际显示类型的widget是不能直接加到树里的,它需要外包一个布局类型的widget,用于控制其布局。

弄清楚上面两种类型的widget之后,就很容易明白怎么布局UI了,按照这个套路制作各种复杂的界面。

四、一些小技巧

1. 一个控件如查平铺整个屏幕宽度?

Container(
   // 这里把width改成double.infinity即可
    width: double.infinity,
    child: <Widget>[ ... ]
)

2. 使用Material式的自定义按钮

/// Icon widget
/// author: kut@sanlea.cn
///
class IconWidget extends StatelessWidget {
  final IconData icon;
  final String text;
  final GestureTapCallback onTap;

  IconWidget({this.icon, this.text, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black12,
      borderRadius: BorderRadius.circular(10),
      child: Ink(
          child: InkWell(
            onTap: onTap,
            borderRadius: BorderRadius.circular(10),
            child: Container(
              width: 80,
              padding: EdgeInsets.symmetric(vertical: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    icon,
                    color: Colors.blueAccent,
                    textDirection: TextDirection.ltr,
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 5),
                    child: Text(text,
                        textAlign: TextAlign.center, textDirection: TextDirection.ltr, style: TextStyle(color: Colors.blueAccent)),
                  )
                ],
              ),
            ),
          )
      ),
    );
  }
}
收藏
评论区

相关推荐

Flutter 2 正式发布!
昨天凌晨,Flutter 2 正式发布: 开发者为_任何_平台创建美观、快速且可移植应用的能力得以更上一层楼。通过 Flutter 2,您可以使用相同的代码库为五种操作系统构建原生应用: iOS、Android、Windows、macOS 和 Linux;以及为 Chrome、Firefox、Safari 和 Edge 等浏览器打造 web 体验。Flutt
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
Android&Flutter混合开发初体验
最近flutter不是一般的火呀,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈,把它作为已有原生App的扩展能力,通过有序推进来提升移动端的开发效率 (1)创建flutter模块,创建module后会AS会自动进行flutter的相关配置 ![在这里
Flutter
在Flutter 加载网页?也是有WebView的哦,和Android一样 1.添加依赖 dependencies: flutter\_webview\_plugin: ^0.2.1+2 2.导入库 import 'import 'package:flutter\_webview\_plugin/flutter\_webview\_plug
Flutter 1.0 正式版: Google 的便携 UI 工具包
Flutter 1.0 正式版: Google 的便携 UI 工具包 文 / Tim Sneath,Google Dart & Flutter 产品组产品经理 Flutter 是 Google 打造的 UI 工具包,通过一套代码同时在 iOS 和 Android 上 构建媲美原生体验的精美应用! 如今,移动开发者们在同时兼容 iOS 和 Android
Flutter Swiper制作轮播效果
![](https://oscimg.oschina.net/oscnet/71c82559e8c6c5a42d6e3420594398793d7.png) #### 1、引入flutter\_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter\_swiper的GitHub
Flutter 介绍、运行环境
Flutter 是谷歌公司开发的一款开源、免费的移动 UI 框架,可以让我们快速的在 Android 和iOS 上构建高质量 App。它最大的特点就是跨平台、以及高性能。 Flutter 基于谷歌的 dart 语言,如果没有任何 Dart 语言的基础,不建议直接学习 Flutter。建议先学习 Dart 语言的基本语法。然后再进入 Flutter 的学习
Flutter 底部导航——BottomNavigationBar
前言 == Google推出flutter这样一个新的高性能跨平台(Android,ios)快速开发框架之后,被业界许多开发者所关注。我在接触了flutter之后发现这个确实是一个好东西,好东西当然要和大家分享,对吧。 今天要跟大家分享的是底部导航功能的实现。我认为flutter的就是在传达一种最简设计,一个部件只关注它本身,达到低耦合高内聚。所以本文讲
Flutter 笔记
> 最近开发需要,要接触移动端一些东西,所以看一下flutter。 因为移动端经常是要做一样事情就是即要有android平台,又要有ios平台,所以,选择了Flutter。 为什么不是React Native?因为,Flutter字比较少,而且不用打空格,我喜欢。 一、安装 ---- 1. 下载 2. 解压 3. 设置path 4. 开始 二、
Flutter之Padding
1 、Padding介绍 ------------ Padding用来为子元素添加填充,也就是指定子元素与容器边界的距离,作用基本上与Android中ViewGroup的padding属性差不多 const Padding({ Key key, @required this.padding, W
Flutter原理与美团的实践
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布[第一个版本](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fflutter%2Fflut
Flutter安装
安装前准备:Android Studio 、VS Code、Git 1\. 使用镜像 -------- 添加用户环境变量: FLUTTER\_STORAGE\_BASE\_URL = https://storage.flutter-io.cn PUB\_HOSTED\_URL=https://pub.flutter-io.cn 2.g