Flutter 第一课---flutter特点及组件开发Flutter都是采用组件的形式进行构建应用和功能的，组件采用现

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

系列文章列表

# 2022年了，你还不会flutter!!!

前言

我是一名前端开发工程师，在今年年中的时候，公司需要用flutter开发一套产品,我有幸参与其中，自此开始了flutter开发之路。前期主要是用flutter原生技术去完成产品基本结构，后因为热更新问题，直接转型flutter web开发，跟我技术栈结合在了一起。

Flutter特点

Flutter 是一个框架，基于 Dart 语言编写。Flutter 里几乎都是采用组件的形式进行构建应用和功能的，组件采用现代响应式框架构建，中心思想是用组件（Widget）构建你的 UI。用官方说：“Flutter 为软件开发行业带来了革新：只要一套代码库，即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用”。

万物皆 Widget（组件）

熟悉前端开发的同学应该知道，在书写网页的布局时会用到各种各样的css属性，但是在flutter开发中，每一个属性都是一个组件，比如Padding,Magin都是组件，关于flutter组件学习，我推荐你们可以看这个网址，我不建议你花费大量的时间去学习每一个组件，因为flutter组件太多了，据我所知，到目前位置已经有300多个了。

new Center(
  child: new Container(
    margin: const EdgeInsets.all(50),
    color: const Color(0xFF3040
    width: 22,
    height: 22,
  ),
)

帕累托认为任何一组东西中最重要的只占其中一小部分约占20%，其余80%尽管是多数，却是次要的。

自定义组件

在flutter中自定义组件就是自定义一个类，这个类需要继承StatelessWidget/StatefulWidget。 StatelessWidget：无状态组件状态不可变的widget 是个抽象类需要实现里面的build方法 StatefulWidget：状态组件，持有的状态可能在widget生命周期变化。(关于生命flutter生命周期我们在下一课讲）组件的在学习，我的建议是，熟练完成,官方编写第一个 Flutter 应用及一些常用组件，如：文本输入框，文字组件、图片组件、列表组件等。

import 'package:flutter/material.dart';

class PromotionComp extends StatefulWidget {
  const PromotionComp({Key? key}) : super(key: key);

  @override
  State<PromotionComp> createState() => _PromotionCompState();
}

class _PromotionCompState extends State<PromotionComp> {
  Map promiseList = {};

  late PageDateModel pageData;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

组件的使用

第一步：导入自定义组件

import '../view_models/page_date_viewmodel.dart';

第二步，直接使用定义好的组件名，如：PromotionComp

Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.only(top: 18),
        child: const PromotionComp()
    );
  }

汇总

关于flutter组件的学习到这里就结束了，下期我们来说说fluuter生命周期及状态管理。如果你刚好正在学习flutter，可以关注我，请相信会给你不一样的收获。如果你是flutter大佬，欢迎指导！