I am trying to manipulate the size and position of an image which are over a background image. I have tried to set the height and width of a child image but it does not shrink.

What I want is to shrink the size of a child image("Neighbor") and give a position to 1/4 of the full screen from the top.

Any suggestions of what I can do?

Here is how my current app looks like

Here is the code

CodePudding user response：

Are you looking for something like this?

class HomeView extends StatefulWidget {
  const HomeView({Key? key}): super(key: key);

  @override
  State<StatefulWidget> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              'assets/images/black-rocks.jpeg',
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Image.asset(
            'assets/images/neighbor-name-and-logo.png',
            width: MediaQuery.of(context).size.height / 4,
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

1. you can use Fractionaloffset or FractionallySizedBox

   ... Container( color: Colors.blue[200], alignment: FractionalOffset(0.7, 0.6), child: FractionallySizedBox( widthFactor: 0.1, heightFactor: 1/3, child: Container(color: Colors.red[900]) ), ), ...

Or you can use https://velocityx.dev/docs/padding Plugin and give the top padding in percentage or context.screenHeight*0.4