Flutter - Problem about Transform with Network Image and Expanded Text

273 Views Asked by At

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,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

But the output is: enter image description here

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?

0

There are 0 best solutions below