手机应用轻松上手，Flutter开发入门攻略详解

Flutter 是一个由 Google 开发的开源框架，用于构建美观、高性能的移动应用。它使用 DART 语言编写，可以在 iOS 和 Android 平台上运行。对于初学者来说，Flutter 提供了一个简单且高效的方式来开发跨平台应用。以下是一份详细的 Flutter 开发入门攻略，帮助你轻松上手。

环境搭建

安装 Flutter SDK

1. 访问 Flutter 官方网站下载 Flutter SDK。
2. 解压下载的文件到指定目录。
3. 在系统的环境变量中添加 Flutter 的 bin 目录路径。

安装 Android Studio 或 IntelliJ IDEA

1. 下载并安装 Android Studio 或 IntelliJ IDEA。
2. 在安装过程中，确保勾选了 Flutter 和 Dart 插件。

配置 Android 环境变量

1. 在 Android Studio 中，打开设置（Settings）。
2. 选择 Build, Execution, Deployment。
3. 在 SDK Location 中，设置 Android SDK 的安装路径。

Flutter 基础语法

变量和函数

void main() {
  var name = 'Flutter';
  print('Hello, $name!');
}

void sayHello(String name) {
  print('Hello, $name!');
}

布局

Flutter 使用 Widget 来构建用户界面。以下是一个简单的布局示例：

import 'package:flutter/material.dart';

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

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

样式

Flutter 使用 CSS 风格的样式来控制 Widget 的外观。以下是一个简单的样式示例：

Text(
  'Hello, Flutter!',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

实践项目

计算器

1. 创建一个新的 Flutter 项目。
2. 在 lib/main.dart 中，定义一个简单的计算器界面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculator',
      home: CalculatorPage(),
    );
  }
}

class CalculatorPage extends StatefulWidget {
  @override
  _CalculatorPageState createState() => _CalculatorPageState();
}

class _CalculatorPageState extends State<CalculatorPage> {
  String _result = '0';

  void _onButtonPressed(String value) {
    setState(() {
      if (value == 'C') {
        _result = '0';
      } else if (value == '=') {
        _result = _calculate(_result);
      } else {
        _result += value;
      }
    });
  }

  String _calculate(String expression) {
    // 使用 Dart 的 eval 函数来计算表达式
    return eval(expression);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calculator'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.all(16),
              child: Text(
                _result,
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(16),
              child: GridView.count(
                crossAxisCount: 4,
                children: [
                  for (int i = 0; i < 10; i++)
                    ElevatedButton(
                      onPressed: () => _onButtonPressed(i.toString()),
                      child: Text(i.toString()),
                    ),
                  ElevatedButton(
                    onPressed: () => _onButtonPressed('C'),
                    child: Text('C'),
                  ),
                  ElevatedButton(
                    onPressed: () => _onButtonPressed('='),
                    child: Text('='),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

待办事项列表

1. 创建一个新的 Flutter 项目。
2. 在 lib/main.dart 中，定义一个简单的待办事项列表界面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List',
      home: TodoListPage(),
    );
  }
}

class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  final _todoList = [];

  void _addTodo(String todo) {
    setState(() {
      _todoList.add(todo);
    });
  }

  void _deleteTodo(int index) {
    setState(() {
      _todoList.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: _todoList.length,
        itemBuilder: (context, index) {
          final todo = _todoList[index];
          return Dismissible(
            key: Key(todo),
            onDismissed: (_) => _deleteTodo(index),
            child: ListTile(
              title: Text(todo),
              trailing: Icon(Icons.delete),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  decoration: InputDecoration(
                    hintText: 'Enter a todo',
                  ),
                  onSubmitted: (value) => _addTodo(value),
                ),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text('Cancel'),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                      _addTodo(value);
                    },
                    child: Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

总结

以上是 Flutter 开发的入门攻略。通过学习这些基本概念和实践项目，你可以开始构建自己的 Flutter 应用。随着经验的积累，你将能够开发出更加复杂和美观的应用。祝你在 Flutter 的旅程中一切顺利！