我试图制作颤动的网络，但当我选择不显示的图像时，我的个人资料图片有问题
Posted
技术标签:
【中文标题】我试图制作颤动的网络，但当我选择不显示的图像时，我的个人资料图片有问题【英文标题】：I tried to make flutter web and i have issue with profile picuture when i picked image it doesn't display 【发布时间】：2022-01-21 23:56:21 【问题描述】：个人资料页面加载正常，但只要我点击相机或厨房图标，它就会打开桌面。 一旦我选择了图像，它就不会出现在个人资料图像部分，但我还不能修复它。终端没有显示任何错误。 谁能告诉我是什么问题以及如何解决？
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_picker/image_picker.dart';
import 'package:learningapp/Landing.page.dart';
import 'package:learningapp/Provider/user.provider.dart';
import 'package:learningapp/learner/Screens/others/learner_favourites.dart';
import 'package:learningapp/learner/utils/LearnerColors.dart';
import 'package:learningapp/learner/utils/LearnerConstant.dart';
import 'package:learningapp/learner/utils/learner_images.dart';
import 'package:learningapp/learner/utils/learner_strings.dart';
import 'package:learningapp/main/utils/app_widget.dart';
import 'package:nb_utils/src/extensions/widget_extensions.dart';
import 'package:learningapp/leaderboard.screen.dart';
import 'package:learningapp/edit.login.details.screen.dart';
class LearnerProfile extends StatefulWidget
const LearnerProfile(Key? key) : super(key: key);
@override
_LearnerProfileState createState() => _LearnerProfileState();
class _LearnerProfileState extends State<LearnerProfile>
@override
void initState()
// TODO: implement initState
super.initState();
AppUser();
PickedFile? imageFile = null;
@override
Widget build(BuildContext context)
changeStatusColor(learner_layout_background);
return Scaffold(
backgroundColor: learner_layout_background,
body: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 16, left: 16, right: 16),
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: learner_white, width: 4)),
child: GestureDetector(
onTap: ()
_showPicker(context);
,
child: CircleAvatar(
//backgroundImage: const AssetImage(learner_ic_Profile),
radius: 55,
backgroundColor: Colors.yellow,
child: imageFile != null
? ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.file(
File(imageFile!.path),
width: 100,
height: 100,
fit: BoxFit.fitHeight,
),
)
: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius:
BorderRadius.circular(50)),
width: 100,
height: 100,
child: Icon(
Icons.camera_alt,
color: Colors.grey[800],
)),
))),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
text(AppUser.instance.user!.displayName,
fontFamily: fontSemibold,
fontSize: textSizeLargeMedium,
textColor: learner_textColorPrimary),
text(learner_lbl_390_290_points,
textColor: learner_textColorPrimary),
const SizedBox(
height: 8,
),
Row(
children: <Widget>[
learnerAward(
learner_ic_medal, learner_colorPrimary),
learnerAward(learner_ic_crown, learner_green),
learnerAward(learner_ic_cup, learner_light_pink),
learnerAward(learner_ic_flag, learner_orange_dark),
],
)
],
)
],
),
),
Container(
margin: const EdgeInsets.only(top: 30, left: 16),
child: text(learner_lbl_general,
fontFamily: fontBold,
textAllCaps: true,
textColor: learner_textColorPrimary)),
const SizedBox(
height: 10,
),
Container(
decoration: boxDecoration(
bgColor: learner_white, showShadow: true, radius: 0),
child: Column(
children: <Widget>[
InkWell(
child: learnerOption(
learner_ic_heart,
learner_lbl_favourite_courses,
),
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LearnerFavourites()),
);
,
),
/* InkWell(
// child: learnerOption(
// learner_ic_user, learner_lbl_my_friends),
// onTap: ()
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => LearnerMyFriends()),
// );
// ,
// ),*/
InkWell(
child: learnerOption(
learner_ic_achievements, lbl_leaderboard),
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LeaderboardScreen()),
);
,
),
],
),
),
Container(
margin: const EdgeInsets.only(top: 25, left: 16),
child: text(learner_lbl_settings,
fontFamily: fontBold,
textAllCaps: true,
textColor: learner_textColorPrimary)),
const SizedBox(
height: 10,
),
Container(
decoration: boxDecoration(
bgColor: learner_white, showShadow: true, radius: 0),
child: Column(
children: <Widget>[
InkWell(
child: learnerOption(
learner_ic_key, learner_lbl_edit_login_details),
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EditLoginDetailsScreen()),
);
,
),
learnerOption(
learner_ic_correct, learner_lbl_update_interests),
// learnerOption(learner_ic_block, learner_lbl_blocked_users),
InkWell(
child: learnerOption(learner_ic_logout, 'Logout'),
onTap: () async
await AppUser.instance.signOut();
LoadingPage().launch(context);
// Navigator.pushNamed(context, '/login');
print("logout");
,
),
],
),
),
],
),
),
),
);
void _showPicker(context)
showModalBottomSheet(
context: context,
builder: (BuildContext bc)
return SafeArea(
child: Container(
child: Wrap(
children: <Widget>[
ListTile(
leading: Icon(Icons.photo_library),
title: Text('Photo Library'),
onTap: ()
_openGallery(context);
Navigator.of(context).pop();
),
ListTile(
leading: Icon(Icons.photo_camera),
title: Text('Camera'),
onTap: ()
_openCamera(context);
Navigator.of(context).pop();
,
),
],
),
),
);
);
Widget learnerAward(var icon, var bgColor)
return Container(
margin: const EdgeInsets.only(right: 10),
width: 35,
height: 35,
decoration: BoxDecoration(shape: BoxShape.circle, color: bgColor),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
icon,
),
),
);
Widget learnerOption(var icon, var heading)
return Padding(
padding: const EdgeInsets.fromLTRB(16, 10, 16, 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
decoration: boxDecoration(
bgColor: learner_white, radius: 8, showShadow: true),
width: 40,
height: 40,
padding: const EdgeInsets.all(10),
child: SvgPicture.asset(
icon,
height: 40,
width: 40,
),
),
const SizedBox(
width: 16,
),
text(heading,
textColor: learner_textColorPrimary,
fontSize: textSizeLargeMedium,
fontFamily: fontSemibold),
],
),
const Icon(
Icons.keyboard_arrow_right,
color: learner_textColorSecondary,
),
],
),
);
//pick from gallery
void _openGallery(BuildContext context) async
final pickedFile = await ImagePicker().pickImage(
source: ImageSource.gallery,
);
setState(()
imageFile = pickedFile! as PickedFile?;
);
Navigator.pop(context);
//pick from camera
void _openCamera(BuildContext context) async
final pickedFile = await ImagePicker().pickImage(
source: ImageSource.camera,
);
setState(()
imageFile = pickedFile! as PickedFile?;
);
Navigator.pop(context);
pubspec.yaml image_picker: ^0.8.4+4
【问题讨论】：
【参考方案1】：Flutter web 默认使用 canvaskit 渲染器，因此有时加载图像会出现问题，因此请尝试使用“flutter run -d chrome --web-renderer html”。
【讨论】：
我可以拿起一张照片，但它没有显示在图片部分ibb.co/TrN7LrJ ibb.co/TrN7LrJ 我尝试了它的工作。检查我放置屏幕截图的答案。 不客气以上是关于我试图制作颤动的网络，但当我选择不显示的图像时，我的个人资料图片有问题的主要内容，如果未能解决你的问题，请参考以下文章