flutter - 颤振材质不同的边框颜色，半径不起作用

Question

我只想在 3 侧添加边框颜色并添加边框半径似乎在容器中它不可能我尝试它显示一些错误然后我尝试使用 Material 并且它工作正常但问题是我现在无法添加边框半径。需要知道如何添加具有不同侧面颜色的边框半径。

想要达到这个

并坚持这一点

您可以在左侧看到没有显示半径

我的代码

                     Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Material(
                          shape: Border(
                            left: BorderSide(
                              width: 1,
                              color: Color(0xffE6E6E6),
                            ),
                            bottom: BorderSide(
                              width: 1,
                              color: Color(0xffE6E6E6),
                            ),
                            top: BorderSide(
                              width: 1,
                              color: Color(0xffE6E6E6),
                            ),
                          ),
                          child: Container(
                            width: Width * 0.45,
                            height: Height * 0.07,
                            decoration: BoxDecoration(
                              color: Color(0xffFAFAFA),
                              borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(5),
                                  bottomLeft: Radius.circular(5)),
                            ),
                            child: Center(
                                child: Text(
                              'https://facebook.com/',
                              style:
                                  TextStyle(color: textGreyColor, fontSize: 15),
                            )),
                          ),
                        ),
                        Container(
                          width: Width * 0.45,
                          height: Height * 0.07,
                          child: TextFormField(
                            key: ValueKey('name'),
                            style: TextStyle(color: textGreyColor),
                            decoration: new InputDecoration(
                              enabledBorder: new OutlineInputBorder(
                                borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(5),
                                    bottomRight: Radius.circular(5)),
                                borderSide: const BorderSide(
                                    color: Color(0xffE6E6E6), width: 1),
                              ),
                              filled: true,
                              hintStyle: new TextStyle(
                                  color: textGreyColor, fontSize: 15),
                              hintText: "Facebook Page",
                              fillColor: Colors.white,
                              focusedBorder: OutlineInputBorder(
                                borderSide: const BorderSide(
                                    color: Color(0xffE6E6E6), width: 1),
                                borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(5),
                                    bottomRight: Radius.circular(5)),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                   

标签： flutterdart

Answer 1

你可以用 ClipRRect 包装它。不是最好的解决方案，但它会起作用

               Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5),
                          bottomLeft: Radius.circular(5)),
                      child: Material(
                        shape: Border(
                          left: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          bottom: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          top: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                        ),
                        child: Container(
                          width: Width * 0.45,
                          height: Height * 0.07,
                          decoration: BoxDecoration(
                            color: Color(0xffFAFAFA),
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5),
                                bottomLeft: Radius.circular(5)),
                          ),
                          child: Center(
                              child: Text(
                            'https://facebook.com/',
                            style: TextStyle(
                                color: textGreyColor, fontSize: 15),
                          )),
                        ),
                      ),
                    ),
                    Container(
                      width: Width * 0.45,
                      height: Height * 0.07,
                      child: TextFormField(
                        key: ValueKey('name'),
                        style: TextStyle(color: textGreyColor),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15),
                          hintText: "Facebook Page",
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),