以下是 Flutter 开发的 基本语法 和 高级特性 整理，涵盖了从入门到进阶的内容，包括核心概念、基础开发语法和高阶功能特性。

一、Flutter 基本概念

1.1 入口函数

Flutter 应用的入口是 main()，通过 runApp() 加载根 Widget。

1
2
3

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

StatelessWidget: 静态的不可变组件。
StatefulWidget: 动态可变的组件。

StatelessWidget 示例

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

StatefulWidget 示例

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $_count'),
            ElevatedButton(onPressed: _increment, child: Text('Increment'))
          ],
        ),
      ),
    );
  }
}

1.3 布局

常用布局组件

组件	描述
`Container`	通用容器，支持样式和尺寸控制
`Row`	水平排列子组件
`Column`	垂直排列子组件
`Stack`	层叠子组件
`ListView`	滚动列表

布局示例

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
);

1.4 样式与装饰

使用 TextStyle 设置字体样式。
使用 BoxDecoration 设置容器样式。

示例

Text(
  'Styled Text',
  style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
);

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text('Decorated Container'),
);

1.5 用户交互

通过 GestureDetector 或 InkWell 捕获用户的触摸事件。

GestureDetector 示例

GestureDetector(
  onTap: () {
    print('Container tapped!');
  },
  child: Container(
    color: Colors.green,
    padding: EdgeInsets.all(16),
    child: Text('Tap Me!'),
  ),
);

1.6 路由与导航

页面跳转

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

返回上一页

1	Navigator.pop(context);

二、Flutter 高级特性

2.1 状态管理

Flutter 提供多种状态管理解决方案，用于管理应用状态。

Provider 示例

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MyApp(),
    ),
  );
}

2.2 异步与流

异步操作

使用 async 和 await 处理异步任务：

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Data Loaded';
}

Stream 示例

Stream<int> counterStream() async* {
  for (int i = 0; i < 10; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

StreamBuilder<int>(
  stream: counterStream(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    }
    return CircularProgressIndicator();
  },
);

2.3 动画

Flutter 提供强大的动画支持，通过 AnimationController 实现复杂动画效果。

动画示例

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * 3.14159,
          child: child,
        );
      },
      child: Icon(Icons.star, size: 100),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

2.4 自定义绘制

使用 CustomPainter 实现自定义图形绘制。

示例

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

@override
Widget build(BuildContext context) {
  return CustomPaint(
    size: Size(200, 200),
    painter: MyPainter(),
  );
}

2.5 平台集成

Platform Channel 示例

Dart 端：

const platform = MethodChannel('com.example/native');

Future<void> callNativeMethod() async {
  try {
    final result = await platform.invokeMethod('getBatteryLevel');
    print('Battery level: $result');
  } catch (e) {
    print('Error: $e');
  }
}

Android 端：

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example/native"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
            .setMethodCallHandler { call, result ->
                if (call.method == "getBatteryLevel") {
                    val batteryLevel = getBatteryLevel()
                    result.success(batteryLevel)
                } else {
                    result.notImplemented()
                }
            }
    }

    private fun getBatteryLevel(): Int {
        val batteryManager = getSystemService(Context.BATTERY_SERVICE) as BatteryManager
        return batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
    }
}

2.6 性能优化

使用 const 构造函数优化不可变组件。
减少 RepaintBoundary 的使用区域。
避免不必要的状态重建，使用 Provider 或 ValueNotifier。

2.7 国际化

通过 flutter_localizations 支持多语言。

示例

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', 'US'),
    Locale('zh', 'CN'),
  ],
);

总结

基础语法

Flutter 应用由 Widget 组成，包括布局、样式和事件处理。
通过导航管理页面跳转。
使用内置组件快速搭建界面。

高级特性

状态管理：Provider、Riverpod 等适合复杂应用。
动画与自定义绘制：通过 AnimationController 和 CustomPainter 实现高级交互。
异步与流：处理实时数据和异步任务。
平台集成：通过 Platform Channel 实现与原生代码的交互。
性能优化与国际化：优化重建，支持多语言。

掌握这些内容，能够应对从简单应用到复杂业务场景的开发需求。

说码解字

Flutter 开发速览