class MyScopedModelState extends State<MyScopedModel> {
  MainModel mainModel;

  void initState() {
    super.initState();
    mainModel = MainModel();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "State",
      home: Scaffold(
        appBar: AppBar(title: Text("Scoped Model")),
        body: ScopedModel<MainModel>(
          model: mainModel,
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    ScopedModel.of<MainModel>(context).getItems();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(top: 10),
          height: 150,
          child: ScopedModelDescendant<MainModel>(
            builder: (context, _, mainModel) => mainModel.items == null
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: mainModel.items.length,
                    itemBuilder: (context, index) {
                      Color randColor = RandomColor()
                          .randomColor(colorBrightness: ColorBrightness.light);
                      return SizedBox(
                        width: 100,
                        child: ItemCard(
                          item: mainModel.items[index],
                          color: randColor,
                          onTap: () => ScopedModel.of<MainModel>(context)
                              .showDetailed(randColor, index),
                        ),
                      );
                    },
                  ),
          ),
        ),
        Divider(),
        Center(
          child: ScopedModelDescendant<MainModel>(
            builder: (context, _, mainModel) => mainModel.detailedIndex == null
                ? Container()
                : SizedBox(
                    width: 200,
                    height: 200,
                    child: ItemCard(
                      item: mainModel.items[mainModel.detailedIndex],
                      color: mainModel.detailedColor,
                      onTap: () => mainModel.increment(),
                    ),
                  ),
          ),
        ),
      ],
    );
  }
}