Web Demo

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

const String bookCoverImageUrl =
    "https://images.unsplash.com/photo-1637083197568-c930e15c0d33?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: DetailPage(),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(child:Column(children: [
      MovieHeader(),
      const SizedBox(height: 10),
      PhotoScroller(imageUrls: testMovie.photoUrls),
      
      TechnologyStack(),
    ]));
  }
}




class TechnologyStack extends StatelessWidget{
  
  
  final _skillWidget = Column(children:[
    Text('Header'),
    CircleAvatar(radius:40.0,backgroundColor:Colors.red),
  ]);
  
  @override
  Widget build (BuildContext context){
    
    
    return SizedBox(height:100,child:ListView.builder(    scrollDirection: Axis.horizontal,itemCount :4,itemBuilder:(context,index){
      
      
   return _skillWidget;
    }));
  }
}
class PhotoScroller extends StatelessWidget {
  PhotoScroller({this.imageUrls});
  final List<String> imageUrls;

  @override
  Widget build(BuildContext context) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Padding(
          padding: EdgeInsets.symmetric(horizontal: 20), child: Text('Photos')),
      SizedBox(height: 10),
      SizedBox(
        height: 100,
        child: ListView.builder(
          
          padding: EdgeInsets.only(top: 10, left: 20),
          scrollDirection: Axis.horizontal,
          itemCount: imageUrls.length,
          itemBuilder: (context, index) {
            final _image = imageUrls[index];
            return Padding(
                padding: EdgeInsets.only(
                    right: 5.0,
                  ),child:ClipRRect(
                        borderRadius: BorderRadius.circular(2),
                        child: Image.network(_image)));
          },
        ),
      )
    ]);
  }
}

class MovieHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      //image Header
      Padding(
        padding: const EdgeInsets.only(bottom: 110),
        child: Container(
          height: 230.0,
          width: double.infinity,
          color: Colors.orange,
          child: Image.network(imageAddress, fit: BoxFit.cover),
        ),
      ),

      Positioned(
          left: 16,
          bottom: 0,
          right: 16,
          child: Row(children: [
           ClipRRect(borderRadius:BorderRadius.circular(2),child: Container(
              width: 90,
              height: 130,
            
              child: Image.network(bookCoverImageUrl, fit: BoxFit.cover),
            )),
            SizedBox(width: 20),
            Expanded(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                  Text('The hidden Adventure'),
                  Text(
                    'Exploring the cyberspace',
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.grey[400],
                    ),
                  ),
                  SizedBox(height: 10),
                  Row(children: [
                    for (var chip in chipValue) Chip(label: Text(chip)),
                  ])
                ])),
          ]))
    ]);
  }
}

final chipValue = ["Flutter", "Dart"];
const imageAddress =
    "https://images.unsplash.com/photo-1637223748323-d1cc3a418be9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=876&q=80";

final testMovie = Movie(
  bannerUrl: 'images/banner.png',
  posterUrl: 'images/poster.png',
  title: 'The Secret Life of Pets',
  rating: 8.0,
  starRating: 4,
  categories: ['Animation', 'Comedy'],
  storyline: 'For their fifth fully-animated feature-film '
      'collaboration, Illumination Entertainment and Universal '
      'Pictures present The Secret Life of Pets, a comedy about '
      'the lives our...',
  photoUrls: [
    'https://images.unsplash.com/photo-1637183092403-df1a107b01f5?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1Mnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    bookCoverImageUrl,
    bookCoverImageUrl,
    bookCoverImageUrl,
  ],
  actors: [
    Actor(
      name: 'Louis C.K.',
      avatarUrl: 'images/louis.png',
    ),
    Actor(
      name: 'Eric Stonestreet',
      avatarUrl: 'images/eric.png',
    ),
    Actor(
      name: 'Kevin Hart',
      avatarUrl: 'images/kevin.png',
    ),
    Actor(
      name: 'Jenny Slate',
      avatarUrl: 'images/jenny.png',
    ),
    Actor(
      name: 'Ellie Kemper',
      avatarUrl: 'images/ellie.png',
    ),
  ],
);

class Movie {
  Movie({
    this.bannerUrl,
    this.posterUrl,
    this.title,
    this.rating,
    this.starRating,
    this.categories,
    this.storyline,
    this.photoUrls,
    this.actors,
  });

  final String bannerUrl;
  final String posterUrl;
  final String title;
  final double rating;
  final int starRating;
  final List<String> categories;
  final String storyline;
  final List<String> photoUrls;
  final List<Actor> actors;
}

class Actor {
  Actor({
    this.name,
    this.avatarUrl,
  });

  final String name;
  final String avatarUrl;
}