I'm trying to re create this particular Card in Flutter, but cannot find an appropriate solution for it

Question

How can I recreate the same layout in flutter, exactly the way it is given in the picture? I want the workflow regarding the same. Flutter Layout

Answer 1

You can do something like this and do some styling changes

Container(
    padding: const EdgeInsets.all(8),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        clubBadge(),
        Column(
          children: [
            const Text("Premium Public Lobby"),
            const Text("Prediction Deadline - Tue, 10 Sep"),
            const SizedBox(height: 12),
            Column(children: [
              OutlinedButton(
                onPressed: () {},
                child: const Text("Go back"),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                )),
              )
            ]),
          ],
        ),
        clubBadge(),
      ],
    ),
  ),

// club widget badge

Widget clubBadge() {
  return Flexible(
    child: Container(
      height: 60,
      width: 60,
      decoration:
          const BoxDecoration(color: Colors.black, shape: BoxShape.circle),
      child: Image.asset("myImage.png"),
    ),
  );
}