고민의 흔적

Image.asset 위젯

Image.asset 위젯은 어플 내부에 미리 저장돼있는 이미지를 사용합니다.

1. 어플에 이미지 저장
2. pubspec.yaml에 이미지 등록
3. 사용

1. 어플에 이미지 저장

폴더생성 버튼을 눌러, assets라는 폴더를 만들어줍니다. 그리고, 사용할 이미지(jpg, jpeg, png 등)를 넣어줍니다.

2. pubspec.yaml에 이미지 등록

pubspec.yaml 파일을 열어, 다음과 같이 # 표시(주석)를 지워줍니다.

다음의 예시 이미지들을 지워주고, 이미지이름을 넣어줍니다.

3. Image.asset 위젯 사용

이제 등록한 경로를 넣어주시면됩니다. asset폴더 안에, war.jpeg를 사용하겠다 = asset/war.jpeg

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.white,
        ),
        body: Image.asset('asset/war.jpeg'),
      ),
    );
  }
}

Chip 위젯

Chip 위젯을 통해서 필터, 검색어, 선택 가능한 영역을 줄 수 있다. avatar 속성을 넣을 수도 있다.

body: Chip(
  backgroundColor: Colors.green.shade100,
  avatar: CircleAvatar(
      backgroundColor: Colors.green,
      child: Text('박'),
  ),
  label: Text('박현성'),
),

Chip을 여러개 만들었는데 오류가 발생했다.

body: Column(
    children: [
       Container(
          height: 40,
          child: ListView(
             scrollDirection: Axis.horizontal,
             children: [
                Chip(
                  backgroundColor: Colors.green.shade100,
                  avatar: CircleAvatar(
	                  backgroundColor: Colors.green,
	                  child: Text('박'),
	                ),
	                label: Text('박현성'),
                ),
                  ... 생략 ...
             ],
          ),
       ),
    ],
),

ListView는 가로(수평적)로 사용했을 때, 부모의 높이를 전부 사용한다. 근데, 부모가 Column위젯일 경우 에러가 나는데, 그 이유는 Column은 계속해서 수직으로 확장하려고 한다. 따라서 Column이 높이가 정해져 있지 않으니, 본인이 정해져 있는 높이가 없어서 그렇다.

Wrap 위젯

Column 위젯의 단점은, 수직으로 계속 넣기 때문인데, 최대 넓이에 도달함과 관계없이 커지기 때문에, 방지턱(오버플로우)가 일어난다. 그렇다면 최대 넓이가 도달하면 자동으로 다음 줄로 넘기고 싶을 때 사용한다.

Wrap위젯은 children 안에 자식들을 넣어주면 된다. spacing 속성값을 통해 자식들 사이 간격을 정한다. runSpacing 속성 값을 통해 줄단위 사이 간격을 정한다.

body: Column(
    children: [
       Container(
          height: 40,
          child: Wrap(
             children: [
                Chip(
                  backgroundColor: Colors.green.shade100,
                  avatar: CircleAvatar(
	                  backgroundColor: Colors.green,
	                  child: Text('박'),
	                ),
	                label: Text('박현성'),
                ),
                  ... 생략 ...
             ],
          ),
       ),
    ],
),

Button 위젯들

onPressed 속성 : 눌러졌을 때, 실행할 함수 () {} : 우리의 코드블록으로서, { 와 } 사이에 코드를 넣어준다.

즉, {와 }의 사이가 곧 코드조각영역이다.

플러터에서 제공하는 공식 버튼은 크게 5가지인데, 그 버튼들은 다음과 같다. 상황에 맞게 바꾸어 사용하면 된다.

FloatingActionButton, TextButton, ElevatedButton, OutlinedButton, IconButton