플리터 용기 둥근 테두리 제공

플리터 용기 둥근 테두리 제공

지금 만들고 있어요.Container()테두리를 달았지만 테두리가 둥글면 좋을 것 같습니다.

지금 가지고 있는 것은 다음과 같습니다.

Container(
      width: screenWidth / 7,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.red[500],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[
            Text(
              '6',
              style: TextStyle(
                  color: Colors.red[500],
                  fontSize: 25),
            ),
            Text(
             'sep',
              style: TextStyle(
                  color: Colors.red[500]),
            )
          ],
        ),
      ),
    );

퍼팅을 해봤는데ClipRRect하지만 국경이 잘려나갑니다.이에 대한 해결책이 있나요?

속성을 사용해 보십시오.borderRadius부터BoxDecoration

뭐랄까

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

완전히 원을 그리려면:

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
      ),
    )

선택한 지점에서 원을 그리려면:

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: Text("hello"),
    ),

또는

  Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: ...
    )

이렇게 쓸 수 있어요.모든 모서리의 테두리를 원하는 경우 Bellow와 같이 사용할 수 있습니다.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(12.0),
    ),
  ),
),

선택한 변에 대해서만 둥근 테두리를 원하는 경우 다음과 같이 사용할 수 있습니다.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
      topRight: Radius.circular(10),
    ),
  ),
  child: Text('Text'),
),

사용할 수 있습니다.ClipRRect위젯:

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

그것은 여러 가지 방법으로 할 수 있다.

• 사용하기 위한 단순한 둥근 모서리가 있는 경우ClipRRect,ClipOval
• 반올림 각막 사용에 대해 더 많은 명령어를 사용하려는 경우BoxDecoration내부Container

Clip RRect(클립 RRect)

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Container(height: 100, width: 100, color: Colors.orange)),

ClipOval

ClipOval(
    child: Container(height: 100, width: 100, color: Colors.orange)),

박스 장식

• 모든 모서리에 걸쳐 경계선

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10),
   color: Colors.orange),
   height: 100,
   width: 100,
 );

• 특정 모서리의 테두리

 Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.only(
       topLeft: Radius.circular(40),
       bottomRight: Radius.circular(40)),
      color: Colors.orange),
    height: 100,
    width: 100,
 ),

• 특정 축의 테두리

  Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.horizontal(
        right: Radius.circular(60),
        ),
      color: Colors.orange),
    height: 100,
    width: 100,
  );

위의 답변에 대한 확장입니다.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

완전한 원을 만들려면 모양 속성을 사용하십시오.

Container(
   padding: const EdgeInsets.all(4),
   decoration: BoxDecoration(
     shape: BoxShape.circle,
     color: Colors.black,
   ),                            
   child: Icon(
      Icons.add,
      size: 15.0,
      color: Colors.white,
     ),
                               
                                

컨테이너()장식: BoxDecoration(borderRadius: BorderRadius.circular(20.0),테두리: Border.all (색상:HexColor ('#C88A3D'),폭: 3.0)),아이: 컨테이너(장식: 새로운 BoxDecoration(borderRadius:
BorderRadius.circular(20.0),color: 색상.흰색, ))),

여기서 중요한 것은,BorderRadius:

Container(    
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[340],
     ),
     borderRadius: BorderRadius.all(Radius.circular(35),
   ),
   child: `enter code here`
),

이것을 컨테이너에 넣는 것만으로

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(30))
  ),
)

그냥 동그라미 모양을 사용하세요.shape: BoxShape.circle에BoxDecoration모든 코드는 다음과 같습니다.

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle
  ),
)

같은 일을 할 수 있는 다른 방법을 보여주기 위해서요

Container 주변에서 InkWell을 사용해야 할 때 유용합니다.

Material(
 shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(8),
 ),
 child: Container(
   height: 100,
   width: 150,
 ),
);

SizedBox(
                            child: (Container(
                              decoration: BoxDecoration(
                                  color: Colors.grey,
                                  border: Border.all(
                                    color: Colors.grey,
                                  ),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(20))),
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Text('00'),

                                      Padding(
                                        padding: const EdgeInsets.fromLTRB(
                                            2.0, 0, 0, 0),
                                        child: Container(
                                          padding: const EdgeInsets.all(8),
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Colors.white,
                                          ),
                                          child: CustomText(
                                            "2",
                                            color: Colors.black,
                                          ),
                                        ),
                                      ), // text
                                    ],
                                  ),
                                ],
                              ),
                            )),
                            width: 60,
                          ),

장식 특성을 사용하여 컨테이너의 반지름 지정

 decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomLeft: Radius.circular(15)),
      ),

or 

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(
      Radius.circular(12.0),

    ),
  ),
),

언급URL : https://stackoverflow.com/questions/57777737/flutter-give-container-rounded-border