[flutter] 스크롤 있는 앱 화면 만들기 -2

ClipRRect , AspectRatio, aspectRatio 이미지 스타일 설정 하는법

HootJem

Oct 10, 2024

Contents

Container 위젯 생성 Const?완성

ClipRRect 를 활용한 이미지 비율 설정

Container

이미지를 포함하고 있는 컨테이너를 만들고, 에셋을 저장합니다.

이미지가 있는 컨테이너에서 Ctrl + Enter를 누르면 특정 위젯이 나타납니다. 그 위젯을 사용하여 아래와 같은 구조를 만듭니다:

ClipRRect


 body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: ListView(
          children: [
            _title(),
            SizedBox(height: 10),
            _menu(),
            SizedBox(height: 10),
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)),
            Container(
              height: 300,
              color: Colors.red,
            ),
          ],
        ),
      ),


  AspectRatio(
              aspectRatio: 1/1,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)),
            ),

ClipRRect 를 누르고 컨트롤+엔터 하여 위젯 추가하여 AspectRatio 로 감싼다. 이제 aspectRatio 를 사용해 이미지의 비율을 정할 수 있다.

비율 적용 예시는 이러하다.

우리는 3/2 로 지정하여 진행하겠습니다.

위젯 생성

이 박스를 반복 시키기 위해 코드를 여러번 만들기 보다는 위젯을 생성하여 호출하는 것이 좋다.

코드를 Column 으로 묶은 뒤 위젯으로 만들어 준다.


class RecipeItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: 3/2, // 가로/세로
          child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)),
        ),
        Text(
          "coffee",
          style: TextStyle(fontSize: 20),
        ),
        Text(
          "Have you ever made your own coffee? Once you've tried a homemade coffee, you'll never go back.",
          style: TextStyle(color: Colors.grey, fontSize: 12),
        ),
      ],
    );
  }
}

위젯으로 만든 다음 스타일 조금 수정

Const?

💡

const는 final과 비슷한 개념으로, 한 번 초기화된 이후에는 변하지 않는 객체를 의미한다.

현재 반복될 위젯은 이미지와 내부의 텍스트가 변경되어야 하므로, 이 경우 const를 사용하지 않는다. new를 두 번 호출하지 않도록 하는 이유는 동일한 객체를 사용하기 때문으로, 만약 Animal 객체를 생성할 때, name 매개변수로 "토끼"와 "고양이"를 전달하면, 이를 const로 만들 수 없다.

모두 "토끼"라면 const로 선언할 수 있지만, 그 경우에 모든 객체가 같은 값을 참조하게 된다(같은 해시코드 참조). 예를 들어, const로 생성된 객체를 호출한 후, set을 사용하여 "토끼", "고양이", "강아지"로 변환하려고 한다면, 하나가 변경될 경우 모든 객체가 동일한 값을 참조하기 때문에 불가능하다. (하나가 바뀌면 모두 변경됨)

따라서, 변하지 않고 추후에도 바뀔 일이 없는 객체를 const로 만들어야 한다. 현재 만든 RecipeItem은 상태가 없으며, 한 번만 표시되고 이후에는 이미지를 변경하는 방식으로 사용할 것이다.

만약

이렇게 띄우면 메모리 주소를 3곳 갖게 되고

생성자에 const 를 붙이면 같은 해시코드를 갖게 된다.

그러나.. 변경을 위해 상태값을 갖게 해야한다.

상태값을 갖게한 순간 에러가 난다.

고민하지 않고 그냥 const 를 제거하면 된다.

(const 에 대해 알아보기 위해 작성해 보았다.)


RecipeItem("burger.jpeg", "burger"),
RecipeItem("coffee.jpeg", "coffee"),
RecipeItem("pizza.jpeg", "coffee"),

완성

💡

스크롤 있는 화면 -1 https://inblog.ai/hj/flutter-스크롤-있는-화면-만들기-1-30547

스크롤 있는 화면 -2 https://inblog.ai/hj/flutter-스크롤-있는-앱-화면-만들기-2-31249

Contents

Container 위젯 생성 Const?완성

body: Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: ListView( children: [ _title(), SizedBox(height: 10), _menu(), SizedBox(height: 10), ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)), Container( height: 300, color: Colors.red, ), ], ), ),

AspectRatio( aspectRatio: 1/1, child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)), ),

class RecipeItem extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ AspectRatio( aspectRatio: 3/2, // 가로/세로 child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.asset("assets/coffee.jpeg", fit : BoxFit.cover)), ), Text( "coffee", style: TextStyle(fontSize: 20), ), Text( "Have you ever made your own coffee? Once you've tried a homemade coffee, you'll never go back.", style: TextStyle(color: Colors.grey, fontSize: 12), ), ], ); } }