estoy tratando de realizar un diseño como este, pero quiero añadirle un width en una imagen que esta en un Container pero no responde, estoy usando stack para primerao tener el container de color purpura y encima la img y un contenido. En el codigo se puede ver parte del inicio del diseño. Si hubiera otra forma de hacer ese me ayudaria bastante. Tambien tenia la duda de que si un Positioned podria tener como child un Row o column para poder tambien trabajarlo asi.
Soy nuevo en flutter. Alguien me puede ayudar. Gracias de antemano.
Este es mi codigo.
import 'package:flutter/material.dart';
import 'package:potatoes_test/app_constants/color.dart';
class ProfileScreen extends StatelessWidget {
const ProfileScreen({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
height: 300,
child: Stack(
children: [
Container(
height: 200,
width: double.infinity,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Welcome back!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
imagem(),
],
),
),
],
),
),
);
}
Widget imagem() {
return Positioned(
left: 100,
right: 0,
top: 100,
bottom: 0,
child: Container(
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.red,
image: DecorationImage(
fit: BoxFit.fitWidth,
colorFilter: ColorFilter.mode(
Colors.grey.withOpacity(0.1), BlendMode.srcOver),
image: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrG4EXV-tktmJoAhbdaOhnQorH_2vQQspj19tt6IYLpdthQfPZY71cCg0jzcU&s',
scale: 1),
),
),
child: Stack(
children: [
Column(
children: [
Row(
children: [
Text('231'),
SizedBox(
width: 20,
),
Text('431')
],
),
],
)
],
),
),
);
}
Widget texto() {
return Positioned(
left: 220,
right: 0,
top: 100,
bottom: 0,
child: Text('xxxxxxxxxxxxxxxxx'));
}
}