버튼과 인터랙션 추가하기

1. TextButton 사용

• 가장 기본적인 버튼으로, 눌렀을 때 클릭 효과가 있습니다.

• 예제

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸습니다!');
  },
  child: Text('눌러보세요'),
)

2. TextButton 사용

• 간단한 텍스트 버튼 형태입니다.

• 예제

TextButton(
  onPressed: () {},
  child: Text('텍스트 버튼'),
)

3. IconButton 사용

• 아이콘으로 된 버튼을 만들 때 사용합니다.

• 예제

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('좋아요 버튼 클릭!');
  },
)

4. 버튼 스타일링

          ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                ),
                onPressed: () {
                  print('버튼이 눌렸습니다!');
                },
                child: Text(
                  '버튼을 눌러보세요',
                  style: TextStyle(fontSize: 15, color: Colors.white),
                )),

5. 따라하기 미션

나만의 버튼 레이아웃을 만들어보고 클릭 시 콘솔에 출력되는 메시지를 바꿔보세요!

import 'package:flutter/material.dart';

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

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

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '버튼 익터랙션 튜토리얼',
      theme: ThemeData(primaryColor: Colors.blue),
      home: mainPage(),
    );
  }
}

class mainPage extends StatefulWidget {
  const mainPage({super.key});

  _mainPageState createState() => _mainPageState();
}

class _mainPageState extends State<mainPage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button Interaction Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Elevated Button Example',
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                ),
                onPressed: () {
                  print('버튼이 눌렸습니다!');
                },
                child: Text(
                  '버튼을 눌러보세요',
                  style: TextStyle(fontSize: 15, color: Colors.white),
                )),
            SizedBox(height: 40),
            const Text(
              'Text Button Example',
              style: TextStyle(fontSize: 20),
            ),
            TextButton(
              style: TextButton.styleFrom(
                  backgroundColor: const Color.fromARGB(255, 149, 170, 207)),
              onPressed: () {
                print('Text Button');
              },
              child: Text(
                'Text Button',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
            SizedBox(height: 40),
            const Text(
              'Icon Button Example',
              style: TextStyle(fontSize: 20),
            ),
            IconButton(
                onPressed: () {
                  print('좋아요 버튼 클릭!');
                },
                icon: Icon(
                  Icons.thumb_up,
                  color: Colors.red,
                )),
          ],
        ),
      ),
    );
  }
}

다음 튜토리얼에서는 리스트뷰(ListView)기본 사용법을 알아보겠습니다.