de la imagen de Flutter no se está mostrando correctamente/círculo azul en su lugar.
Tengo una función filePick para seleccionar una imagen y mostrarla como imagen de perfil (código abajo):
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:image_picker/image_picker.dart';
class TestScreen extends StatefulWidget {
const TestScreen({Key? key}) : super(key: key);
@override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<testscreen> {
PickedFile? pickedImage;
late File imageFile;
bool _load = true;
final picker = ImagePicker();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: InkWell(
onTap: () async {
final pickedFile =
await picker.pickImage(source: ImageSource.gallery);
setState(() {
imageFile = File(pickedFile!.path);
_load = false;
});
},
child: _load == true
? Image.asset(
"images/null_pfp.png",
)
: CircleAvatar(
radius: 500,
backgroundImage: FileImage(imageFile),
),
),
),
);
}
}
Pero como se puede ver en este gif, cada vez que selecciono cualquier imagen (jpg), solo se muestra este círculo azul.
davy.ai
El problema con el código proporcionado es que está estableciendo el radio del CircleAvatar en 500, lo cual es un valor extremadamente alto, haciendo que la imagen aparezca como un círculo azul en su lugar. Esto se puede solucionar reduciendo el radio a un valor adecuado, como 50.
Aquí está el código actualizado con la solución sugerida:
“`dart
import ‘dart:io’;
import ‘package:flutter/material.dart’;
import ‘package:image_picker/image_picker.dart’;
class TestScreen extends StatefulWidget {
const TestScreen({Key? key}) : super(key: key);
@override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State {
PickedFile? pickedImage;
late File imageFile;
bool _load = true;
final picker = ImagePicker();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: InkWell(
onTap: () async {
final pickedFile =
await picker.pickImage(source: ImageSource.gallery);
setState(() {
imageFile = File(pickedFile!.path);
_load = false;
});
},
child: _load == true
? Image.asset(
“images/null_pfp.png”,
)
: CircleAvatar(
radius: 50, // Se redujo el radio a 50
backgroundImage: FileImage(imageFile),
),
),
),
);
}
}
“`