Flutter 示例目录

在这一章中，我们将通过一系列具体的示例来深入学习 Flutter 的使用。这些示例覆盖了从基础到进阶的内容，旨在帮助读者全面掌握 Flutter 的开发技巧。

基础示例

示例 1: Hello World 应用

在这个简单的示例中，我们将创建一个最基础的 Flutter 应用程序，它仅显示 "Hello, World!" 文本。这将帮助初学者熟悉 Flutter 的基本结构和文件布局。

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

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

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

示例 2: 布局与样式

我们将展示如何使用不同的布局组件（如 Row、Column 和 Stack）以及如何为文本和其他小部件应用样式。

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout & Styling',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout & Styling'),
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Welcome to Flutter',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.favorite, color: Colors.red),
                  Icon(Icons.star, color: Colors.amber),
                  Icon(Icons.person, color: Colors.green),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

进阶示例

示例 3: 状态管理

我们将探讨如何在 Flutter 中管理状态，并介绍 StatefulWidget 及其生命周期方法。

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

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

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

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Management'),
      ),
      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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

示例 4: 网络请求与数据处理

这个示例展示了如何从网络获取数据，并将其展示在 Flutter 应用中。我们将使用 http 包来发送 HTTP 请求，并使用 FutureBuilder 来处理异步操作。

// www.javascriptcn.com code example
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Requests',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NetworkScreen(),
    );
  }
}

class NetworkScreen extends StatefulWidget {
  @override
  _NetworkScreenState createState() => _NetworkScreenState();
}

class _NetworkScreenState extends State<NetworkScreen> {
  List<dynamic> _posts;
  bool _loading = true;

  Future<void> _fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    if (response.statusCode == 200) {
      setState(() {
        _posts = json.decode(response.body);
        _loading = false;
      });
    } else {
      throw Exception('Failed to load posts');
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Requests'),
      ),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _posts.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_posts[index]['title']),
                  subtitle: Text(_posts[index]['body']),
                );
              },
            ),
    );
  }
}

实战项目示例

示例 5: 构建一个天气应用

在这个实战项目示例中，我们将构建一个简单的天气应用，该应用能够显示当前地点的天气信息。我们将使用 http 包进行网络请求，并使用 ListView 来展示天气数据。

// www.javascriptcn.com code example
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WeatherScreen(),
    );
  }
}

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  List<Map<String, dynamic>> _weatherData;
  bool _loading = true;

  Future<void> _fetchWeatherData(String location) async {
    final apiKey = 'YOUR_API_KEY'; // 替换为你的实际 API Key
    final response = await http.get(Uri.parse('https://api.openweathermap.org/data/2.5/weather?q=$location&appid=$apiKey'));

    if (response.statusCode == 200) {
      setState(() {
        _weatherData = [json.decode(response.body)];
        _loading = false;
      });
    } else {
      throw Exception('Failed to load weather data');
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchWeatherData('Beijing'); // 替换为你想要查询的城市名称
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _weatherData.length,
              itemBuilder: (context, index) {
                return Card(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${_weatherData[index]['name']} - ${_weatherData[index]['weather'][0]['description']}',
                          style: TextStyle(fontSize: 20),
                        ),
                        SizedBox(height: 10),
                        Row(
                          children: [
                            Icon(Icons.wb_sunny),
                            SizedBox(width: 5),
                            Text('${_weatherData[index]['main']['temp']}°C'),
                          ],
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
    );
  }
}

以上示例覆盖了 Flutter 开发中的许多关键概念和技术，希望对你的学习有所帮助！