Flutter - Separation of concern - #1

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Years'),
      ),
      body: ListView(
        children: [
          for (var i = DateTime.now().year; i > 2000; i--)
            ListTile(
              title: Text('$i'),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    settings: RouteSettings(arguments: i),
                    builder: (context) {
                      return const DetailScreen();
                    },
                  ),
                );
              },
            )
        ],
      ),
    );
  }
}

class DetailScreen extends StatefulWidget {
  const DetailScreen({
    Key? key,
  }) : super(key: key);

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

class _DetailScreenState extends State<DetailScreen> {
  int? _year;
  late Future<Map<dynamic, dynamic>?> _future;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final year = ModalRoute.of(context)!.settings.arguments as int;
    if (_year != year) {
      _future = _loadMeasure(year);
    }
  }

  Future<Map<dynamic, dynamic>?> _loadMeasure(int year) async {
    _year = year;
    final uri = Uri.parse(
        'https://datausa.io/api/data?drilldowns=Nation&measures=Population&year=$year');
    final result = await get(uri);
    final body = jsonDecode(result.body);
    final data = body['data'] as List<dynamic>;
    if (data.isNotEmpty) {
      return data.first;
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Year $_year'),
      ),
      body: FutureBuilder<Map<dynamic, dynamic>?>(
        future: _future,
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.done:
              final error = snapshot.error;
              if (error != null) {
                return Center(
                  child: Text('Failed : $error'),
                );
              }
              final data = snapshot.data;
              if (data != null) {
                final theme = Theme.of(context);
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        data['Nation'],
                        style: theme.textTheme.headline5,
                      ),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            '${data['Population']}',
                            style: theme.textTheme.headline4,
                          ),
                          Icon(
                            Icons.people,
                            color: theme.textTheme.headline4?.color,
                            size: theme.textTheme.headline4?.fontSize,
                          ),
                        ],
                      ),
                    ],
                  ),
                );
              }
              return const Center(
                child: Text('No data'),
              );
            case ConnectionState.none:
            case ConnectionState.waiting:
            case ConnectionState.active:
              return const Center(
                child: CircularProgressIndicator(),
              );
          }
        },
      ),
    );
  }
}