How do I add a vertical divider in Flutter?

Question

I want to vertically divide my Container in two halves and display coins on one side and tickets on the other. I have somewhat been able to achieve this but when I try adding Text() below it all my constraints get messed up. This is my code for said container.

      Padding( 
                padding: const EdgeInsets.only(left: 8, right: 8, top: 15.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(16.0)),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(16.0)),
                        gradient: LinearGradient(
                          colors: [
                            const Color(0xFFFF8C3B),
                            const Color(0xFFFE524B)
                          ],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            height: 5.0,
                          ),
                          Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 15.0),
                            child: Column(
                              // crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 18.0),
                                      child: ClipRRect(
                                        borderRadius: BorderRadius.circular(5),
                                        child: Text(
                                          "Coins",
                                          style: TextStyle(
                                            fontFamily: "Netflix",
                                            fontWeight: FontWeight.w600,
                                            fontSize: 20,
                                            letterSpacing: 0.27,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      height: 60.0,
                                      width: 2.0,
                                      color: Colors.white,
                                      margin: const EdgeInsets.only(
                                          top: 8, left: 60.0, right: 60.0),
                                    ),
                                    Column(
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              bottom: 18.0),
                                          child: ClipRRect(
                                            borderRadius:
                                                BorderRadius.circular(5),
                                            child: Text(
                                              "Tickets",
                                              style: TextStyle(
                                                fontFamily: "Netflix",
                                                fontWeight: FontWeight.w600,
                                                fontSize: 20,
                                                letterSpacing: 0.27,
                                                color: Colors.white,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),

                              ],
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          Container(
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  const Color(0xFFFF8C3B),
                                  const Color(0xFFFE524B)
                                ],
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),

Please help me, it would be a lot of help as I am new to Flutter... thank you so much!

Answer 1

You could do something like this:

@override
Widget build(BuildContext context) {
    return Material(
      color: Colors.green,
      child: Center(
        child: Container(
          height: 90,
          margin: const EdgeInsets.symmetric(horizontal: 20),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(25),
          ),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Account balance',
                      style: TextStyle(fontWeight: FontWeight.w800),
                    ),
                    Text('\$30,309.09',
                        style: TextStyle(
                            fontWeight: FontWeight.w800,
                            color: Colors.black.withOpacity(0.4)))
                  ],
                ),
              ),
              Container(
                margin: const EdgeInsets.symmetric(vertical: 10),
                color: Colors.grey.withOpacity(0.4),
                width: 1,
              ), // THE DIVIDER. CHANGE THIS TO ACCOMMODATE YOUR NEEDS
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Salary',
                      style: TextStyle(fontWeight: FontWeight.w800),
                    ),
                    Text('\$2,517.56',
                        style: TextStyle(
                            fontWeight: FontWeight.w800,
                            color: Colors.black.withOpacity(0.4)))
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

The actual result for this is the following: