简体   繁体   中英

How to create decorated rounded container sharing same divider line with colored border flutter

I am trying to replicate the list view below. It's a list view(or containers), that you can select, and it will make the border colored and apply a background with no padding between the containers, but there is a thing, they share the same divider line. I have already given a shot on this, but didn't quite work as I expected. Because the dividers lines got doubled (thicker), and it's kinda annoying.

What I want:

我正在尝试制作的列表视图

EDIT:

They are selectable containers, so you can click on each one and it will highlight the borders, so if you are thinking of making the middle container one with borders only at the right and left side, it will not work because you will not be able to highlight the top and bottom border.

See the example below:

三个容器都可以选择,并且需要共享同一个分隔线

I was trying to make the first container with the bottom border transparent ( bottom: BorderSide(width: 1, color: Colors.transparent), ), so it would not get doubled. But it seems that you can not have a radius container in flutter with different border colors.

What I have made:

我创建的列表视图

Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
            border: Border.all(width: 1, color: Colors.red),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
              border: Border.all(width: 1, color: Colors.black)),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(20),
              bottomLeft: Radius.circular(20),
            ),
            border: Border.all(width: 1, color: Colors.black),
          ),
        ),

For the middle Container use just border:Border(left:,right:)


   Container(
            height: 100,
            width: 200,
            decoration: const BoxDecoration(
              border: Border(
                left: BorderSide(
                  color: Colors.green,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.green,
                  width: 1,
                ),
              ),
            ),
          ),

try this:

Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              topLeft: Radius.circular(20),
            ),
            border: isTopSelected ? Border.all(width: 1, color: Colors.red) : 
              Border(
                top: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                left: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
              ),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
              border: isMiddleSelected ? Border.all(width: 1, color: Colors.red) :
                Border.all(width: 1, color: Colors.Black),
          ),
        ),
        Container(
          height: 100,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(20),
              bottomLeft: Radius.circular(20),
            ),
            border: isBottomSelected ? Border.all(width: 1, color: Colors.red) : 
              Border(
                bottom: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                left: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
                right: BorderSide(
                  color: Colors.black,
                  width: 1,
                ),
              ),
          ),
        ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM