momo/lib/material/home.dart

import 'package:dio/dio.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:http_parser/http_parser.dart';
import 'package:mime/mime.dart';
import 'package:momo/provider/rerender.dart';
import 'package:momo/request/http_client.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({Key? key, required this.content}) : super(key: key);
  final Widget content;

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  int selectedIndex = 0;
  bool uploading = false;
  double uploadProgress = 0;
  final tabList = [
    {"path": "/", "title": "相册"},
    {"path": "/profile", "title": "用户资料"},
    {"path": "/detail", "title": "图片详情"}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ["/", "/profile"].contains(GoRouterState.of(context).location)
            ? null
            : IconButton(
                icon: const Icon(Icons.keyboard_arrow_left),
                onPressed: () {
                  context.go("/");
                },
              ),
        title: Text(
          tabList.firstWhere((element) =>
                  element["path"] ==
                  GoRouterState.of(context).fullpath)["title"] ??
              "",
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        elevation: 10,
      ),
      floatingActionButton: selectedIndex == 0 &&
              GoRouterState.of(context).fullpath == "/"
          ? (!uploading
              ? FloatingActionButton(
                  onPressed: () async {
                    FilePickerResult? result = await FilePicker.platform
                        .pickFiles(type: FileType.image);

                    if (result != null) {
                      String fileName = result.files.first.name;
                      String? mimeType = lookupMimeType(fileName);
                      MultipartFile file;
                      if (kIsWeb) {
                        final fileBytes = result.files.first.bytes;
                        file = MultipartFile.fromBytes(fileBytes as List<int>,
                            filename: result.files.first.name,
                            contentType: MediaType(mimeType!.split("/").first,
                                mimeType.split("/").last));
                      } else {
                        String? filePath = result.files.first.path;
                        if (filePath == null) {
                          return;
                        }
                        file = await MultipartFile.fromFile(filePath,
                            filename: result.files.first.name,
                            contentType: MediaType(mimeType!.split("/").first,
                                mimeType.split("/").last));
                      }
                      FormData data = FormData.fromMap({"pic": file});
                      setState(() {
                        uploading = true;
                      });
                      await dio.post("/image/upload", data: data,
                          onSendProgress: (sended, total) {
                        print("$sended / $total");
                        setState(() {
                          uploadProgress = sended / total;
                        });
                      }).then((value) {
                        setState(() {
                          uploading = false;
                        });
                        ref.read(uniqueIdProvider.notifier).updateId();
                        ScaffoldMessenger.of(context)
                            .showSnackBar(const SnackBar(
                          content: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.check_circle,
                                color: Colors.white,
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Text("上传成功")
                            ],
                          ),
                          backgroundColor: Colors.lightGreen,
                        ));
                      });
                    } else {}
                  },
                  child: const Icon(Icons.add),
                )
              : FloatingActionButton(
                  onPressed: null,
                  child: CircularProgressIndicator(
                    value: uploadProgress,
                  ),
                ))
          : null,
      body: Row(
        children: [
          MediaQuery.of(context).size.width > 640
              ? NavigationRail(
                  elevation: 10,
                  backgroundColor: const Color(0xffebf6f5),
                  onDestinationSelected: (idx) {
                    setState(() {
                      selectedIndex = idx;
                    });
                    context.go(Uri(
                      path: tabList[idx]["path"] ?? "",
                    ).toString());
                  },
                  destinations: const [
                    NavigationRailDestination(
                        icon: Icon(Icons.photo_album), label: Text("相册")),
                    NavigationRailDestination(
                        icon: Icon(Icons.person), label: Text("用户"))
                  ],
                  extended: MediaQuery.of(context).size.width >= 1008,
                  selectedIndex: selectedIndex)
              : const SizedBox(
                  width: 0,
                ),
          Expanded(child: widget.content)
        ],
      ),
      bottomNavigationBar: MediaQuery.of(context).size.width <= 640
          ? BottomNavigationBar(
              elevation: 10,
              currentIndex: selectedIndex,
              onTap: (idx) {
                setState(() {
                  selectedIndex = idx;
                });
                context.go(tabList[idx]["path"] ?? "");
              },
              items: const [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.photo_album), label: "相册"),
                  BottomNavigationBarItem(icon: Icon(Icons.person), label: "用户")
                ])
          : null,
    );
  }
}