Flutter 项目实战 实现上传头像和个人资料 (五)

/  编辑个人资资料界面  /

 /  编辑资料导航栏  /

ValueListenableBuilder通过 ValueListenableBuilder 实现局部刷新 , 当用户点击导航栏保存按钮时展现一个提交资料的进度 (网络请求) , 这时只会刷新导航栏的保存按钮 , 不会对整个界面进行刷新 .

Widget saveWidget(final PEditIntro _pEditIntro,
    final ValueNotifier _valueNotifierSave,
    final Map _editIntroMap) {
  return ValueListenableBuilder(
      builder: (BuildContext context, bool value, Widget? child) {
        return value
            ? Container(
                width: 180.w,
                alignment: Alignment.center,
                child: CircularProgressIndicator(
                  strokeWidth: 12.w,
                  backgroundColor: Colors.blue,
                  valueColor: const AlwaysStoppedAnimation(Colors.red),
                ),
              )
            : child!;
      },
      valueListenable: _valueNotifierSave,
      child: GestureDetector(
        onTap: () {
          _pEditIntro.editIntro(_editIntroMap);
        },
        child: Container(
          width: 180.w,
          color: Colors.red.withOpacity(0.0),
          alignment: Alignment.center,
          child: Text(
            '保存',
            style: TextStyle(fontSize: 40.sp),
          ),
        ),
      ));
}

AppBar(
          title: Text(
            "编辑资料",
            style: TextStyle(fontSize: 50.sp),
          ),
          centerTitle: true,
          backgroundColor: Colors.blue.withOpacity(0.8),
          elevation: 0.0,
          actions: [
            saveWidget(_pEditIntro, _valueNotifierSave, _editIntroMap),
          ],
        ),

 /  上传个人头像  /

在 pubspec.yaml 配置 image_picker 依赖 (any用版本号代替也可以)

 image_picker: any #选择手机图片

选择图片实现头像上传

 edit_intro_page.dart

...
 
onTap: () async {
                  /// 隐藏软键盘
                  FocusScope.of(context).requestFocus(FocusNode());
                  final ImagePicker _picker = ImagePicker();
                  final XFile? image =
                      await _picker.pickImage(source: ImageSource.gallery);
                  String imagePath = image!.path;
                  logV('上传头像地址：$imagePath');
                  _pEditIntro.uploadHead(imagePath);
                },
 
...

m_edit_intro.dart

@override
  uploadHead(String file, SuccessCallback s, FailureCallback f) async {
    /// 获取要上传图片的名称
    var _fileName = file.substring(file.lastIndexOf("/") + 1, file.length);
    MultipartFile _fromFile = await MultipartFile.fromFile(
      file,
      filename: _fileName,
    );
    HttpManager().upLoad(
      url: '/upload/file',
      tag: tag,
      data: FormData.fromMap({
        'file': _fromFile,
        'type': 'head',
      }),
      options: Options(
        contentType: "multipart/form-data",
      ),
      successCallback: (data) {
        s(data);
      },
      errorCallback: (data) {
        f(data);
      },
    );
  }

http_manager.dart