아이콘 버튼

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 4번째.

일부 버튼은 하트, 휴지통, 공유 화살표처럼 아이콘만으로 이루어져 있습니다. 이것이 IconButton입니다:

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    print('Deleted');
  },
)

child:는 없습니다. 대신 icon:을 사용하며, 이는 첫 번째 섹션에서 사용한 것과 같은 Icon 위젯입니다. 탭하면 아이콘 주위에 둥근 물결 효과가 나타납니다.

일반 Icon은 탭할 수 없습니다. 그림만 그릴 뿐입니다. IconButton은 탭할 수 있는 요소로 바꿔 줍니다.

챌린지

쉬움

텍스트 Like this post 뒤에 Icons.thumb_up이 있는 IconButton을 추가하고, 누르면 Liked를 출력하도록 하세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Like this post'),
            ],
          ),
        ),
      ),
    );
  }
}