플러터 - 이미지 모서리 둥글게 (round)

ClipRRect 위젯

이미지의 모서리를 둥글게 1

ClipRRect(
    child: Image.asset('assets/no-picture-taking.png'),
    borderRadius: BorderRadius.circular(10),
  )
  
  
  예제
  Container(
    width: double.infinity,
    height: 170,
    child: newsItem['urlToImage'] != null
        ? ClipRRect(
            child: Image.network(
              newsItem['urlToImage'],
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.circular(10),
          )
        : ClipRRect(
            child: Image.asset('assets/no-picture-taking.png'),
            borderRadius: BorderRadius.circular(10),
          ),
  )

===========================================================================================

컨테이너 영역 모서리 둥글게

ShapeDecoration 옵션

Container(
  width: double.infinity,
  height: 57,
  decoration: ShapeDecoration(
    color: Colors.black.withOpacity(0.7),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),  // 왼쪽아래 모서리
        bottomRight: Radius.circular(10), // 오른쪽 아래 모서리
      ),
    ),
  ),

 

 

===========================================================================================

텍스트 글자 행(라인)수 제한 주기 옵션 및 ...(점점점 처리)

Text 옵션에 maxLines 속성에 행수를 적고 Textoverflow.ellipsis 하면 ...으로 처리한다

Text(
  newsItem['title'],
  style: TextStyle(
    color: Colors.white,
    fontSize: 14,
    fontWeight: FontWeight.bold,
  ),
  maxLines: 1,
    overflow: TextOverflow.ellipsis,
)