main.dart

import 'package:flutter/material.dart';
import 'package:ui_challenge_2/horizontal_snapping_list.dart';
import 'package:ui_challenge_2/sizes.dart';

main() => runApp(MaterialApp(home: MyHomePage()));

class GameModel {
  final String image;
  final String title;
  final String subtitle;

  GameModel({
    this.image,
    this.title,
    this.subtitle,
  });
}

class GameItemWidget extends StatelessWidget {
  final double itemWidth;
  final double itemHeight;
  final GameModel gameModel;

  const GameItemWidget({
    Key key,
    this.itemWidth = 188.0,
    this.itemHeight = 200.0,
    @required this.gameModel,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: itemWidth,
      height: itemHeight,
      child: Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            gameModel.image,
            fit: BoxFit.fitHeight,
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  gameModel.title,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
                SizedBox(
                  height: 4,
                ),
                Text(
                  gameModel.subtitle,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

final game1 = GameModel(
  image: 'https://img.techpowerup.org/201026/game1686.png',
  title: 'Road Fight',
  subtitle: 'Shooting Cars',
);

final game2 = GameModel(
  image: 'https://img.techpowerup.org/201026/game2907.png',
  title: 'Vikings',
  subtitle: 'Sons of Ragnar',
);

final List<GameModel> games = [
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
  game1,
  game2,
];

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 4 Fun'),
      ),
      body: Center(
        child: HorizontalSnappingList(
          itemWidth: 188.0,
          itemHorizontalMargin: 0,
          itemCount: games.length,
          itemBuilder: (context, i) => GameItemWidget(gameModel: games[i]),
        ),
      ),
    );
  }
}