Flutter - Complex layout

main.dart

// @author OMi Shah
// @email omi@codecyan.com
// @organization CodeCyan
// @website www.codecyan.com

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Demo',
        home: HomeData());
  }
}

class HomeData extends StatefulWidget {
  HomeData({Key key}) : super(key: key);

  @override
  _HomeDataState createState() => _HomeDataState();
}

class _HomeDataState extends State<HomeData> {
  @override
  Widget build(BuildContext context) {
    //final userData = Provider.of<UserData>(context);
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            color: Colors.transparent,
            height: 188,
            child: HorizontalList(),
          ),
          ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: 10,
            itemBuilder: (context, int index) {
              return VerticalTile();
            },
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, int index) {
          bool first = index == 0;
          return HorizontalTile(first: first);
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    
    return Container(
      height: 465,
      margin: EdgeInsets.fromLTRB(30, 0, 30, 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: const Color(0xffF9F9ED),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  }
}

class HorizontalTile extends StatelessWidget {
  final bool first;
  //const HorizontalTile({Key? key}) : super(key: key);
  HorizontalTile({this.first});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 168,
      width: 122,
      margin: first
          ? EdgeInsets.fromLTRB(15, 23, 0, 23)
          : EdgeInsets.fromLTRB(10, 23, 0, 23),
      decoration: BoxDecoration(
        color: const Color(0xffF9F9ED),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: const Color(0xff131200).withOpacity(0.20),
            spreadRadius: 1,
            blurRadius: 8,
            offset: Offset(3, 3), // changes position of shadow
          ),
        ],
      ),
      child: Text('Container'),
    );
  }
}