class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Step 1: Diagram the layout

The first step is to break the layout down to its basic elements:

Identify the rows and columns.

Does the layout include a grid?

Are there overlapping elements?

Does the UI need tabs?

Notice areas that require alignment, padding, or borders.

First, identify the larger elements. In this example,
four elements are arranged into a column: an image, two rows, and a block of text.