Making custom widget in flutter

 import 'package:flutter/material.dart';

import 'package:intl/intl.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: TextTheme(
            headline1: TextStyle(
                fontWeight: FontWeight.bold, fontSize: 25, color: Colors.black),
            subtitle1: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.bold,
                color: Colors.green)),
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  var time = DateTime.now();
  var emailText = TextEditingController();
  var passText = TextEditingController();
  callBack(){
    print('clicked');
  }
  var arrColor= [
    Colors.greenAccent,
    Colors.blueAccent,
    Colors.red,
    Colors.pink,
    Colors.amberAccent,
    Colors.purple,
    Colors.yellow,
    Colors.grey






  ];
  @override
  Widget build(BuildContext context) {
    var arrNames = [
      'Cashify',
      'Abhinav',
      'Aftab',
      'Sahim',
      'Ankit',
      'Sohail',
      'Shivam',
      'Vikash',
      'Altaf'
    ];
    return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body:Column(
          children: [
            catItems(),
            contacts(),
            profile(),
            bio(),



          ],
        )



    );
  }
}

class catItems extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Expanded(
      flex: 2,
      child: Container(
        color: Colors.black,
        child: ListView.builder(itemBuilder: (context,index)=>
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CircleAvatar(
                radius: 50,
                backgroundColor: Colors.green,
              ),
            ),
          itemCount: 10,
          scrollDirection: Axis.horizontal,


        ),
      ),
    );
  }
}
class contacts extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Container(
        color: Colors.blue,
        child: ListView.builder(itemBuilder: (context, index) => ListTile(

          leading : CircleAvatar(backgroundColor: Colors.pink),
          title: Text('Name', style: TextStyle(color: Colors.black87) ,),
          subtitle: Text('Number'),
          trailing: Icon(Icons.info_outline_rounded),
        ),
          itemCount: 4,
        ),
      ),
    );
  }
  }
class profile extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        color: Colors.purple,
        child: ListView.builder(itemBuilder: (context,index)=>
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 50,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(11),
                    color: Colors.yellow
                ),
              ),
            ),
          itemCount: 10, scrollDirection:Axis.horizontal,

        ),
      ),
    );
  }
}
class bio extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 2,
      child: Container(
        color: Colors.pink,
        child: ListView.builder(itemBuilder: (context,index)=>
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 100,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(11),
                    color: Colors.blue
                ),
              ),
            ),
          itemCount: 10, scrollDirection:Axis.horizontal,

        ),

      ),
    );
  }
}