Flutter 网络通信 Dio

dio_util

import 'package:dio/dio.dart';

class DioUtils {
  final Dio _dio = Dio();

  DioUtils() {
    _dio.options
      ..baseUrl = "https://geek.itheima.net/v1_0/"
      ..connectTimeout = Duration(seconds: 5)
      ..sendTimeout = Duration(seconds: 5)
      ..receiveTimeout = Duration(seconds: 5);
    // _dio.options.connectTimeout = Duration(seconds: 5);
    // _dio.options.sendTimeout = Duration(seconds: 5);
    // _dio.options.receiveTimeout = Duration(seconds: 5);

    _addInterceptor();
  }

  void _addInterceptor() {
    _dio.interceptors.add(
      InterceptorsWrapper(
        onRequest: (context, handler) {
          handler.next(context);
        },
        onResponse: (context, handler) {
          if (context.statusCode! >= 200 && context.statusCode! < 300) {
            handler.next(context);
            return;
          }
          handler.reject(DioException(requestOptions: context.requestOptions));
        },
        onError: (context, handler) {
          handler.next(context);
        },
      ),
    );
  }

  Future<Response<dynamic>> get(final String url, {final Map<String, dynamic>? params}) {
    return _dio.get(url, queryParameters: params);
  }
}

channel

class Channel {
  final int id;
  final String name;

  Channel({required this.id, required this.name});

  factory Channel.fromJson(Map<String, dynamic> json) {
    return Channel(
      id: json["id"],
      name: json["name"],
    );
  }
}

main

import 'package:demo_flutter/model/Channel.dart';
import 'package:demo_flutter/utils/dio_util.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<Channel> channels = [];

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

    _getChannels();
  }

  void _getChannels() async {
    final Response res = await DioUtils().get("channels");
    final data = res.data["data"]["channels"];

    setState(() {
      channels = (data as List).map((e) => Channel.fromJson(e)).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _ChildPage(
          list: channels,
          del: (index) {
            channels.removeAt(index);
          },
        ),
      ),
    );
  }
}

class _ChildPage extends StatefulWidget {
  final List<Channel> list;
  final Function(int index) del;

  const _ChildPage({required this.list, required this.del});

  @override
  State<_ChildPage> createState() => _ChildPageState();
}

class _ChildPageState extends State<_ChildPage> {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100,
      ),
      itemCount: widget.list.length,
      itemBuilder: (final BuildContext context, final int index) {
        return Stack(
          alignment: Alignment.topRight,
          children: [
            Container(
              alignment: Alignment.center,
              height: 60,
              color: Colors.blue,
              margin: EdgeInsets.all(5),
              child: Text(widget.list[index].name),
            ),
            Positioned(
              child: IconButton(
                onPressed: () {
                  setState(() {
                    widget.del(index);
                  });
                },
                icon: Icon(Icons.delete, size: 10),
              ),
            ),
          ],
        );
      },
    );
  }
}

效果图