Flutter简介框架搭建和hello world

最新推荐文章于 2025-08-22 08:39:30 发布

原创最新推荐文章于 2025-08-22 08:39:30 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter 学习日记

Flutter 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了Flutter，一个现代响应式框架，强调其跨平台、高性能等特点。核心概念包括组件、构建和状态。文章详细讲解了组件的概念，如StatefulWidget和StatelessWidget，并指导读者进行Flutter环境配置，包括SDK安装、环境变量设置，以及在Android Studio中安装Flutter插件。最后，通过创建Hello World应用来实践入门。

Flutter：

一个现代的响应式框架，一个2d的渲染引擎、现成的组件和开发工具。可快速设计、构建、测试和调试应用程序。
核心概念：组件、构建、状态、框架等。

特点：跨平台、动画体验、响应式、支持插件、60fps超高性能。

组件(widget):是Flutter应用程序用户的基本构建块,是一致统一对象模块。

widget：可以定义为：一个界面组件，一个文本样式，一种布局，一种动画处理，一种手势处理。

组件嵌套：由一个个简单功能组件组转完成（简单的例子）

return 样式组件（

child 容器组件（

child 文本组件（），

），

所有组件都继承widget

-----有状态组件:界面会发生变化的组件.statefulwidget
-----无状态组件:界面不发生变化的组件.statelesswidget

所有界面的形式都得多写多练......

Flutter 环境变量的设置：

1.下载安装Flutter SDK

2.在环境变量中的Path下配置本地fluttersdk的地址
ANDROID_HOME 配置Android sdk的的路劲
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
PUB_HOSTED_URL https://pub.flutter-io.cn

3.在cmd中执行 flutter doctor 查看日志信息

4.在AndroidStudio中settings---plugins中安装Flutter的插件

5.执行 flutter doctor 查看日志信息根据提示信息解决错误

创建hello world,在as中lib下 main.dart下修改:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: "Flutter is one day",
      home: Scaffold(
        appBar:  AppBar(
          title:  Text("welcome to flutter is one day"),
        ),
        body:  Center(
          child:  Text("Hello World"),
        ),
      ),
    );
  }
}