Flutter - Problem about container with Network Image aligned to right and text aligned to left

Question

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: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 200,
          height: 100,
          alignment: Alignment.bottomRight,
          decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadiusDirectional.circular(16.0),
              color: Colors.yellow),
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Flexible(
                  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=webp",
                  fit: BoxFit.contain,
                ),
                transform: Matrix4.rotationZ(-0.2),
                alignment: FractionalOffset.centerRight,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and the output is;

My output has some problems.

• I want the container to be wide left-right and has 8 padding from the right and left.
• I want the network picture to be bottom right with only its rounded picture, not as white square.

-- EDIT --

I've changed my code like;

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: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 100,
          alignment: Alignment.center,
          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,
                  ),
                ),
              ),
              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 now there is no rotation on picture, and it is not aligned to bottom right. Output:

Answer 1

1. To get the container wide you should change its width from 200 to width of your screen using Mediaquery. eg : MediaQuery.of(context).size.width
2. That image has a white background also its square. You should use an image with transparent background.
3. Add this to your row : mainAxisAlignment: MainAxisAlignment.spaceBetween this will move the image to right end and text to left.

Hope that is what you meant and this helps.

Edit

I made some changes and now your code looks like this :

 Container(
        color: Colors.yellow,
        height: 100,
        width: Constants(context).scrnWidth,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                "Baby",
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          
            Container(
              height: 100,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Transform.rotate(
                  angle: -0.3,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: 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"))),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),