I'm trying to create a simple Container includes;
- A text aligned to center left (that text can include 50 characters)
- A network image which is aligned to bottom right, rotated a bit, and rounded.
I've written a code like this:
import 'package:flutter/material.dart';
class MyScreen extends StatefulWidget {
static const String idScreen = "myScreen";
@override
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("My Screen")),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 100,
alignment: Alignment.bottomRight,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadiusDirectional.circular(16.0),
color: Colors.yellow),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Baby",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
Transform(
child: Image.network(
"https://target.scene7.com/is/image/Target/Baby-210913-1631564062108?wid=315&hei=315&qlt=60&fmt=png",
fit: BoxFit.contain,
),
transform: Matrix4.rotationZ(-0.2),
alignment: FractionalOffset.centerRight,
),
],
),
),
),
],
),
);
}
}
In order to avoid white square in image, I tried to add my picture in Transform like:
Container(
width: 50,
height: 50,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.contain,
image: NetworkImage(
"https://target.scene7.com/is/image/Target/Baby-210913-1631564062108?wid=315&hei=315&qlt=60&fmt=png"
)
)
)
But flutter doesn't accept it in Transform widget. How can I solve this?
Also another problem; if I write "Baby" like "Baby Baby Baby Baby Baby Baby Baby Baby ", it gives overflow error. I tried to wrap my Text or Row with Expanded but didn't work. How can I solve this too?