flutterdartcontainersflutter-containerflutter-card

Is it possible to make two cards one below the other?


I have a question: I need two cards one below the other. I´ve tried it with the code bellow, but the second "child" from the container is red underliend and I as a beginner don't know why. And yes I know, child is only one and children are more than one, but I don´t know how it should work with children. I would be happy if someone could help me with this (probably easy to solve) problem. Thanks in advance!

Container(
  child: Card(
    child: InkWell(
      splashColor: Colors.blue.withAlpha(30),
      onTap: () {
        print Text("Got it");
      },
      child: Container(
        child: Text("title", style: TextStyle(fontSize: 20)),
        //width: 300,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ),
  child: Card(
    child: InkWell(
      splashColor: Colors.blue.withAlpha(30),
      onTap: () {
        print Text("Got it");
      },
      child: Container(
        child: Text("title", style: TextStyle(fontSize: 20)),
        //width: 300,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ),
),

Solution

  • You need to use a Column widget to show multiple widgets one below the other, like this:

    Column(
      children: <Widget>[
        Card(
          child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onTap: () {
              print("Got it");
            },
            child: Container(
              child: Text("title", style: TextStyle(fontSize: 20)),
              //width: 300,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
        Card(
          child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onTap: () {
              print("Got it");
            },
            child: Container(
              child: Text("title", style: TextStyle(fontSize: 20)),
              //width: 300,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ]
    ),