Flutter + Idea 环境搭建及配置教程

1. 安装Flutter SDK
   首先需要在官网下载Flutter SDK，下载并解压到本地文件夹中。然后将Flutter SDK的bin目录添加到系统的PATH环境变量中，以便在任何位置都可以使用Flutter命令。

2. 安装IDEA
   IDEA是一款强大的代码编辑器，可以进行多种语言的开发。可以去官网下载并安装IDEA Community版或Ultimate版。安装完毕后打开IDEA，并安装Flutter插件，具体可以参考IDEA提供的安装插件的教程。

3. 创建Flutter项目
   在IDEA中新建一个Flutter项目，可以在菜单中选择File -> New -> Flutter Project，然后依照向导一步步进行创建即可。

4. 配置Flutter插件
   在创建Flutter项目时，IDEA会默认安装Flutter插件。但是为了保证插件的最新版本和支持度，可以手动进行配置。在IDEA菜单中选择File -> Settings -> Plugins -> Browse Repositories，并在搜索框中输入"Flutter"，选择安装最新版本的Flutter插件。然后重启IDEA，并在IDEA菜单中选择File -> New -> New Flutter Project，确保Flutter插件已经正确安装并启用。

5. 配置Flutter SDK路径
   在IDEA中配置Flutter SDK路径，可以进入IDEA菜单中选择File -> Settings -> Languages & Frameworks -> Flutter，然后在Flutter SDK Path中输入Flutter SDK所在的路径以及Flutter版本号。这样IDEA就可以自动检测Flutter SDK的相关配置并进行调试和运行。

6. 编写Flutter代码
   在IDEA中使用Flutter插件编写代码可以很方便地调试和运行，可以选择在IDEA下方的终端中输入flutter命令来运行Flutter应用程序。例如：

flutter run

1. 示例说明1
   假设我们要创建一个简单的计数器Flutter应用，可以在IDEA中创建一个新的Flutter项目，在lib文件夹中创建一个名为counter.dart的文件，然后编写以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(title: 'Flutter Demo Home Page'),
    );
  }
}

class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

这段代码包括两个部分，第一部分是Flutter应用的启动和主题设置，第二部分是一个简单的计数器页面。在应用中，通过点击按钮可以实现计数器的增加功能。这是一个经典的Flutter示例应用。

1. 示例说明2
   以另一个样例代码为例，我们可以创建一个新的Flutter项目，在pubspec.yaml中添加依赖项，然后编写以下代码：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List data;

  Future<String> getData() async {
    var response = await http.get(
        Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),
        headers: {"Accept": "application/json"});

    setState(() {
      data = json.decode(response.body);
    });

    return "Success!";
  }

  @override
  void initState() {
    super.initState();
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(data[index]["title"]),
              subtitle: Text(data[index]["body"]),
              leading: CircleAvatar(
                child: Text(data[index]["id"].toString()),
              ),
            );
          }),
    );
  }
}

这段代码也包括两个部分，第一部分是Flutter应用的启动和主题设置，第二部分是使用http package获取JSON数据并展示在ListView中。这是一个典型的用Flutter获取API数据并动态展示的示例。