Creating ListView

To use a ListView inside a Column or ROW

**We _MUST_ `Wrap` the `ListView` inside a `Conatainer`.**or if wanting to make the `ListView for the whole remaining space then we `Wrap`the`ListView`using `Expanded`or`Flexible` .

/// ListView Wrap with  Container

Column(
  children: [
Container(    /// Use Expanded or Flexible for the taking up whole remaining area
    height: 200,
    margin: const EdgeInsets.symmetric(vertical: 24),
    decoration: BoxDecoration(border: Border.all(color: Colors.green)),
    /* to remove */
    child: ListView(
      /* ______ */
    ),
  ],
)

• Also refe: https://stackoverflow.com/questions/50252569/vertical-viewport-was-given-unbounded-height

---

Other ListView tips

✅✅ Add padding to ListView on only one side

This is needed when the last part or the first part needs some inside padding and that padding will be scrollable

padding: EdgeInsets.only(top: 14),

Container(
    height: 200,
    margin: const EdgeInsets.symmetric(vertical: 24),
    decoration: BoxDecoration(border: Border.all(color: Colors.green)),
    /* to remove */
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: [
        Container(
          padding: EdgeInsets.all(40),
          margin: const EdgeInsets.fromLTRB(18, 0, 0, 0),
          decoration: BoxDecoration(
              color: Colors.yellow,
              border: Border.all(color: Colors.pink, width: 2.0)),
          child: Text('Hello this is a Text!'),
        ),
        Container(
          padding: EdgeInsets.all(50),
          margin: const EdgeInsets.fromLTRB(18, 0, 0, 0),
          decoration: BoxDecoration(
              color: Colors.yellow,
              border: Border.all(color: Colors.pink, width: 2.0)),
          child: Text('Hello this is a Text!'),
        ),
        Container(
          padding: EdgeInsets.all(50),
          margin: const EdgeInsets.fromLTRB(18, 0, 0, 0),
          decoration: BoxDecoration(
              color: Colors.yellow,
              border: Border.all(color: Colors.pink, width: 2.0)),
          child: Text('Hello this is a Text!'),
        ),
      ],
    ),
  ),