Flutter 入门基础：从零开始了解跨平台开发框架

Flutter 是 Google 推出的开源 UI 框架，使用 Dart 语言编写，可快速构建 Android、iOS、Web 和桌面应用。本文将带你快速了解 Flutter 的核心概念和基础语法，帮助你迈出第一步。

1. 为什么选择 Flutter？

• 跨平台：一套代码，多端运行。
• 高性能：直接编译为原生代码，渲染效率接近原生应用。
• 热重载：修改代码后立即看到效果，开发效率极高。
• 丰富的组件：提供 Material Design 和 Cupertino 风格的现成组件。

2. Dart 语言基础

Flutter 使用 Dart 语言，先掌握几个关键语法：

// 变量声明
var name = 'Flutter'; // 自动推断类型
String title = '入门基础';
int count = 10;

// 函数
int add(int a, int b) {
  return a + b;
}

// 箭头函数
int multiply(int a, int b) => a * b;

// 类与对象
class Person {
  String name;
  Person(this.name);
  void sayHello() {
    print('Hello, $name');
  }
}

3. 第一个 Flutter 应用

每个 Flutter 应用都由一个 main 函数启动，并调用 runApp 方法：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('我的第一个 Flutter 应用')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

4. 核心概念：Widget

Flutter 中一切都是 Widget（组件）。常见的 Widget 分为两类：

• StatelessWidget：无状态组件，内容固定不变。
• StatefulWidget：有状态组件，可动态更新 UI。

例如，一个简单的计数器应用需要 StatefulWidget：

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('点击次数：$_count'),
            ElevatedButton(
              onPressed: _increment,
              child: Text('增加'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 布局与样式

Flutter 提供了多种布局 Widget，常用的有：

• Row / Column：水平 / 垂直排列子组件。
• Stack：层叠布局。
• Container：装饰、边距、尺寸等。
• Padding / Align：内边距和对齐。

Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Row(
    children: [
      Icon(Icons.star, color: Colors.white),
      SizedBox(width: 8),
      Text('这是一个容器', style: TextStyle(color: Colors.white)),
    ],
  ),
)

6. 学习建议

• 安装 Flutter SDK 和编辑器（推荐 VS Code 或 Android Studio）。
• 跟着官方文档写几个简单示例。
• 理解 Widget 树和状态管理（后续可学习 Provider、Riverpod 等）。
• 尝试构建一个完整的页面，例如登录页或列表页。

Flutter 上手快，生态日趋成熟，是移动开发的有力选择。希望这篇简短的入门能帮你打开 Flutter 的大门！