[Flutter] 4. Flutter의 "기본 위젯 사용"

Flutter 학습: 기본 위젯 사용

Flutter는 다양한 기본 위젯을 제공하여 복잡한 UI도 쉽게 구성할 수 있습니다. 이번 글에서는 텍스트 및 이미지 위젯, 버튼 및 사용자 입력 위젯, 상호작용 위젯에 대해 알아보겠습니다.

---

1. 텍스트 및 이미지: Text, TextStyle, Image, Image.asset, Image.network

Text: Text 위젯은 화면에 텍스트를 표시하는 가장 기본적인 위젯입니다.

 

예제:

 

[dart]

 

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

 

 

TextStyle: TextStyle 클래스를 사용하여 텍스트의 스타일을 정의할 수 있습니다. 위 예제에서 사용된 것처럼 폰트 크기, 굵기, 색상 등을 설정할 수 있습니다.

 

Image: Image 위젯은 이미지를 표시하는 위젯입니다. Flutter에서는 로컬 자산과 네트워크 이미지를 쉽게 사용할 수 있습니다.

 

Image.asset: 로컬 자산 이미지를 표시할 때 사용합니다. 먼저, pubspec.yaml 파일에 이미지를 등록해야 합니다.

 

[yaml]

 

flutter:
  assets:
    - assets/images/flutter_logo.png

 

예제:

 

[dart]

 

Image.asset('assets/images/flutter_logo.png')

 

 

Image.network: 네트워크 이미지를 표시할 때 사용합니다.

 

예제:

 

[dart]

 

Image.network('https://flutter.dev/assets/homepage/carousel/slide_1-bg-4e2fcef2ff1f2f92c7ef784abff22a7a1af8eb67de30c395b6d0f3a3a4e2db4a.png')

---

2. 버튼 및 사용자 입력: ElevatedButton, TextButton, IconButton, TextField, Form, FormField

ElevatedButton: ElevatedButton은 기본적으로 배경색이 있는 버튼입니다.

 

예제:

 

[dart]

 

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressed');
  },
  child: Text('Elevated Button'),
)

 

 

TextButton: TextButton은 텍스트로만 구성된 버튼입니다.

 

예제:

 

[dart]

 

TextButton(
  onPressed: () {
    print('TextButton pressed');
  },
  child: Text('Text Button'),
)

 

 

IconButton: IconButton은 아이콘으로 구성된 버튼입니다.

 

예제:

 

[dart]

 

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('IconButton pressed');
  },
)

 

 

TextField: TextField는 사용자로부터 텍스트 입력을 받을 수 있는 입력 필드입니다.

 

예제:

 

[dart]

 

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
)

 

 

Form 및 FormField: Form 위젯과 FormField 위젯을 사용하여 여러 입력 필드를 그룹화하고, 폼 전체를 관리할 수 있습니다.

 

예제:

 

[dart]

 

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String _name = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'Name'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
            onSaved: (value) {
              _name = value!;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                _formKey.currentState!.save();
                print('Form submitted: $_name');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

---

3. 상호작용 위젯: GestureDetector, InkWell, Switch, Slider

GestureDetector: GestureDetector는 터치 제스처를 감지하여 특정 동작을 수행할 수 있는 위젯입니다.

 

예제:

 

[dart]

 

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(child: Text('Tap me')),
  ),
)

 

 

InkWell: InkWell은 터치 시 잉크 효과를 제공하는 위젯입니다.

 

예제:

 

[dart]

 

InkWell(
  onTap: () {
    print('InkWell tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    child: Center(child: Text('Tap me')),
  ),
)

 

 

Switch: Switch는 두 상태(켜짐/꺼짐) 사이를 전환할 수 있는 위젯입니다.

 

예제:

 

[dart]

 

bool _switchValue = false;

Switch(
  value: _switchValue,
  onChanged: (value) {
    setState(() {
      _switchValue = value;
    });
  },
)

 

 

Slider: Slider는 사용자가 값을 선택할 수 있는 슬라이더 위젯입니다.

 

예제:

 

[dart]

 

double _sliderValue = 0.0;

Slider(
  value: _sliderValue,
  min: 0.0,
  max: 100.0,
  onChanged: (value) {
    setState(() {
      _sliderValue = value;
    });
  },
)

---

이 글에서는 Flutter의 기본 위젯인 텍스트 및 이미지 위젯, 버튼 및 사용자 입력 위젯, 상호작용 위젯에 대해 알아보았습니다. 이러한 위젯들을 조합하여 다양한 UI를 구성할 수 있습니다. 다음 단계에서는 더 복잡한 레이아웃과 상태 관리를 학습하여 더 완성도 높은 애플리케이션을 개발해보세요. Happy Coding!