In my detail page on flutter I am trying to round image with ClipRREct it worked fine one the listvi-CodePudding

Is it maybe because of Flexible on the sizedbox? Because on the listview page as I said ClipRRect worked completely fine. Or should I implement a different type of rounding a photo?

final topContentText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const SizedBox(height: 30.0),
        Flexible(
          flex: 1,
          fit: FlexFit.tight,
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Image.network(
                plant.pImage,
              ),
            ),
          ),
        ),
        const SizedBox(height: 20.0),
        Text(
          plant.pName,
          style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
        ),
        const SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
                flex: 4,
                child: Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: Text(
                      plant.pLatinName,
                      style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
                    ))),
            Expanded(flex: 2, child: plantType)
          ],
        ),
      ],
      mainAxisSize: MainAxisSize.min,
    );[![enter image description here][1]][1]

CodePudding user response：

You can try use ClipOval with CicleAvatar like this:

final topContentText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const SizedBox(height: 30.0),
        Flexible(
          flex: 1,
          fit: FlexFit.tight,
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: ClipOval(
                  child: CircleAvatar(
                    backgroundColor: Colors.transparent,
                    maxRadius: 30,
                    child: Image.network(
                            plant.pImage,
                          ),
                        ),
                  ),
          ),
        ),
        const SizedBox(height: 20.0),
        Text(
          plant.pName,
          style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
        ),
        const SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
                flex: 4,
                child: Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: Text(
                      plant.pLatinName,
                      style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
                    ))),
            Expanded(flex: 2, child: plantType)
          ],
        ),
      ],
      mainAxisSize: MainAxisSize.min,
    );[![enter image description here][1]][1]

CodePudding user response：

I already got it now, but I will still paste the code if anybody ever gets stuck on a rather odd problem. I used container and then BoxDecoration.

final topContentText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const SizedBox(height: 30.0),
        Flexible(
          flex: 1,
          fit: FlexFit.tight,
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover, image: NetworkImage(plant.pImage)),
                    borderRadius: const BorderRadius.all(Radius.circular(8.0)),
              ),
            ),
          ),
        ),
        const SizedBox(height: 20.0),
        Text(
          plant.pName,
          style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0), fontSize: 45.0),
        ),
        const SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
                flex: 4,
                child: Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: Text(
                      plant.pLatinName,
                      style: const TextStyle(color: Color.fromRGBO(254, 255, 238, 1.0)),
                    ))),
            Expanded(flex: 2, child: plantType)
          ],
        ),
      ],
      mainAxisSize: MainAxisSize.min,
    );