UI

2. main.dart

                          import 'package:flutter/material.dart';
                          import 'package:a/screens/home_page.dart';

                          import 'dart:ui';

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

                          class MyApp extends StatelessWidget {
                            @override
                            Widget build(BuildContext context) {
                              double screenWidth = window.physicalSize.width;
                              return MaterialApp(
                                debugShowCheckedModeBanner: false,

                                theme: ThemeData(
                                    scaffoldBackgroundColor: Color(0xffffff)
                                ),
                                home: HomePage(),
                              );
                            }
                          }

                          

2. HomePage

1. Title and icon

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(
          child: Container(),
        )

    );
  }
}

2. Profile image

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(

          //**************************** */
          // added new code    //
          //************************** */
          child: ListView(
            children: [

              Column(
                children: [

                  CircleAvatar(
                    radius: 50,
                    backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
                    ),
                  )

                ],
              )


            ],
          ),
        )

    );
  }
}

3. profile complete section

import 'package:flutter/material.dart';


class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: [

              Column(
                children: [

                  CircleAvatar(
                    radius: 50,
                    backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
                    ),
                  ),

                  SizedBox(height: 20,),
                  Text(
                    "manoj vijayan",
                    style: TextStyle(
                      fontSize: 25
                    ),
                  ),

                  Text(
                    "Developer",
                    style: TextStyle(
                        fontSize: 18
                    ),
                  ),


                  //****************** */
                  // added new question  // 
                  //************************ */
                  Row(
                    children: [
                      Text("Complete your profile 1/15")
                    ],
                  ),

                  Row(
                    children: List.generate(5, (index) {

                        return Expanded(
                          child: Container(
                            height: 7,
                            margin: EdgeInsets.only(right : index==4 ? 0 : 6),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: index == 0 ? Colors.blue : Colors.black26
                            ),
                            child: Text(index.toString()),

                          ),
                        );
                      }
                    ),
                  )


                ],
              )


            ],
          ),
        )

    );
  }
}

3. List view

1. ListView.separated

import 'package:flutter/material.dart';


class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: [

              Column(
                children: [

                  CircleAvatar(
                    radius: 50,
                    backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
                    ),
                  ),

                  SizedBox(height: 20,),
                  Text(
                    "manoj vijayan",
                    style: TextStyle(
                      fontSize: 25
                    ),
                  ),

                  Text(
                    "Developer",
                    style: TextStyle(
                        fontSize: 18
                    ),
                  ),

                  Row(
                    children: [
                      Text("Complete your profile 1/15")
                    ],
                  ),

                  Row(
                    children: List.generate(5, (index) {

                        return Expanded(
                          child: Container(
                            height: 7,
                            margin: EdgeInsets.only(right : index==4 ? 0 : 6),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: index == 0 ? Colors.blue : Colors.black26
                            ),
                            child: Text(index.toString()),

                          ),
                        );
                      }
                    ),
                  ),

                  //*************************** */
                  // added new code  //
                  //************************** */
                  SizedBox(
                    height: 160,
                      child: ListView.separated(
                        itemCount: 3,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index){
                            return SizedBox(
                              width: 160,
                              child: Card(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Column(
                                    children: [

                                    ],
                                  ),
                                ),
                              ),
                            );
                        },
                        separatorBuilder: (context, index) => Padding(padding: EdgeInsets.all(5)),
                      ),
                  )


                ],
              )


            ],
          ),
        )

    );
  }
}

5. listing

1. List.generate

import 'package:flutter/material.dart';


class HomePage extends StatelessWidget {

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("PROFILE"),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: (){},
                icon: Icon(Icons.settings)
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: [

              Column(
                children: [

                  CircleAvatar(
                    radius: 50,
                    backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
                    ),
                  ),

                  SizedBox(height: 20,),
                  Text(
                    "manoj vijayan",
                    style: TextStyle(
                      fontSize: 25
                    ),
                  ),

                  Text(
                    "Developer",
                    style: TextStyle(
                        fontSize: 18
                    ),
                  ),

                  Row(
                    children: [
                      Text("Complete your profile 1/15")
                    ],
                  ),

                  Row(
                    children: List.generate(5, (index) {

                        return Expanded(
                          child: Container(
                            height: 7,
                            margin: EdgeInsets.only(right : index==4 ? 0 : 6),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: index == 0 ? Colors.blue : Colors.black26
                            ),
                            child: Text(index.toString()),

                          ),
                        );
                      }
                    ),
                  ),

                  SizedBox(
                    height: 160,
                      child: ListView.separated(
                        itemCount: 3,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index){
                            return SizedBox(
                              width: 160,
                              child: Card(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Column(
                                    children: [

                                    ],
                                  ),
                                ),
                              ),
                            );
                        },
                        separatorBuilder: (context, index) => Padding(padding: EdgeInsets.all(5)),
                      ),
                  ),


                  //********************* */
                  // added new code //
                  //********************** */
                  ...List.generate(5, (index) {
                      return Card(
                        child: ListTile(
                          title: Text("test1"),
                        ),
                      );
                    }
                  )

                ],
              )


            ],
          ),
        )

    );
  }
}