I implemented the application of one picture for several pixels. Already tried to do it through Stack - but then part of the top image overlaps. The pictures need to be in an 8:1 ratio. Tell me, please, what layout of widgets can I try to implement this?

How it should look

What does it look like now

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.deepOrangeAccent,
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                  flex: 8,
                  child: Image.asset(
                      fit: BoxFit.fill, "images/someimage1.png")),
              Expanded(
                  flex: 1,
                  child:
                      Image.asset(fit: BoxFit.fitWidth, "images/someimage2.png")),
            ],
          ),
       ),
    );
  }

CodePudding user response：

Use flexfit tight

Flexible(
  flex: 8,
  fit: FlexFit.tight,
  child: Image.asset(""),
);

CodePudding user response：

You can use LayoutBuilder with Stack widget.

return Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) {
      return Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: constraints.maxWidth,
              height: constraints.maxHeight * .8,
              color: Colors.blue,
            ),
          ),
          /// widget render priority bottom to top
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: constraints.maxWidth,
              height: constraints.maxHeight * .2  
                  20, //20 px extra for middle overlap
              color: Colors.purple.withOpacity(.5),
            ),
          ),
        ],
      );
    },
  ),
);

More about flutter layout