时间戳

首页 > 解决方案 > 如何将库 image_picker 和 image_cropper 实现到扩展无状态小部件的类？

flutter - 如何将库 image_picker 和 image_cropper 实现到扩展无状态小部件的类？

问题描述

我正在尝试将库image_picker和image_cropper实现到遗留代码，但它扩展了无状态小部件。

import 'package:elxr_mobile/components/export.dart';
import 'package:elxr_mobile/models/export.dart';
import 'package:elxr_mobile/pages/04_profile/export.dart';
import 'package:elxr_mobile/styles/export.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';

class ProfileHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, ElxrViewModel>(
        converter: ElxrViewModel.fromStore,
        builder: (BuildContext context, vm) {
          return Container(
            child: Column(
              children: <Widget>[
                InkWell(
                  child: CircleAvatar(
                    radius: 30.0,
                    backgroundImage:
                        AssetImage('assets/images/profile.icon.round.png'),
                    backgroundColor: Colors.white,
                  ),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                          builder: (BuildContext context) => AboutMePage()),
                    );
                  },
                ),
                Container(height: 5.0),
                Text(
                  vm.user?.displayName ?? "",
                  textAlign: TextAlign.center,
                  style: ProfileTextTheme.header(),
                ),
                Container(height: 5.0),
                Container(
                  width: 150.0,
                  padding: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
                  decoration: BoxDecoration(
                      border: Border.all(
                    color: Colors.grey,
                  )),
                  child: Text(
                    'KIT: ${(vm.customer?.userKitNo ?? "").padLeft(8, '0')}',
                    textAlign: TextAlign.center,
                    style: ProfileTextTheme.subtext(context),
                  ),
                ),
                Container(height: 5.0),
              ],
            ),
          );
        });
  }
}

当我单击用户头像时，它应该显示从图库中选择图片或从相机拍照的选项，然后用户可以裁剪该图片。

当前的 UI 如下图所示。 当前用户界面 请帮忙！

标签： flutterdart

解决方案

这就是您可以在没有选择器的情况下执行此操作的方法，您可以在选择器中选择要从中导入图像的源。必须有一个插件，或者您可以自己创建对话框。

                InkWell(
              child: CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    AssetImage('assets/images/profile.icon.round.png'),
                backgroundColor: Colors.white,
              ),
              onTap: () async {
              File file = await ImagePicker.pickImage(source: ImageSource.gallery);

              if (file == null) {return;}

              File croppedFile = await ImageCropper.cropImage(
                  sourcePath: file.path,
                  ratioX: 1.0,
                  ratioY: 1.0,
                  maxWidth: 512,
                  maxHeight: 512,
                  circleShape: true);


              if (croppedFile == null) {return;}

              Directory directory = await getApplicationDocumentsDirectory();


              String finalPath = directory.path + '/profile_picture' + pathPlugin.extension(croppedFile.path);
              File finalImage = await croppedFile.copy(finalPath);

              imageCache.clear();
              },
            ),

推荐阅读