How to make this in Flutter i am new in flutter so if anyone knows

Question

I want one row with this one big image on left and two images on right with one up and the second down. thanks in advance if Someone can help!!

Answer 1

The key insight is to break the layout into nested rows and/or columns. Check out this example,

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: getContainer(Colors.green),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    child: getContainer(Colors.yellow),
                  ),
                  Expanded(
                    child: getContainer(Colors.red),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Widget getContainer(MaterialColor color) =>
    Container(height: 50, width: 50, color: color);

Answer 2

Everything is contained in one row, the first column will be larger than the second one with the widget Expanded flex :1. In the second column, there's a column widget with that you'll have two rows for your image.

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          children: [
            Expanded(
              child: SizedBox(
                child: Image.asset('your large image'),
              ),
              flex: 1,
            ),
            Expanded(
              child: Column(
                children: [
                  Image.asset('your second image'),
                  Image.asset('your third image'),
                ],
              ),
              flex: 0,
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

solved

**here is the example **

import 'package:flutter/material.dart';

class BagScreen extends StatelessWidget {
  const BagScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          // color: Colors.red,
          height: 400,
          width: 400,
          child: Row(
            children: [
              Container(
                child: Image.asset(
                  "assets/images/bgimage.PNG",
                  fit: BoxFit.contain,
                  width: 250.0,
                  // height: 350.0,
                ),
              ),
              SizedBox(
                width: 10.0,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    height: 10.0,
                  ),
                  Container(
                    child: Image.asset("assets/images/upsm.PNG"),
                  ),
                  Container(
                    child: Image.asset("assets/images/upsm.PNG"),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}