如何在 Flutter 中添加垂直分隔线？

Question

我想将我的容器垂直分成两半，一边显示硬币，另一边显示票。我已经能够做到这一点，但是当我尝试在它下面添加 Text() 时，我的所有约束都搞砸了。这是我所说的容器的代码。

      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,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),

请帮帮我，因为我是 Flutter 的新手，所以对我有很大帮助...非常感谢！

Answer 1

你可以这样做：

@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)))
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

实际结果如下：

Answer 2

希望这对您有用。使用 VerticalDivider 作为行项并用 IntrinsicHeight 包装它

 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>[
                           IntrinsicHeight(
                            child: 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,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                  VerticalDivider(),
                                ),
                              ],
                             ),
                            ),

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