[Flutter]실전_개념

Flutter 개발 입문: 위젯, 레이아웃, 그리고 핵심 개념 🚀

Flutter는 크로스 플랫폼 앱 개발에 많이 사용되는 프레임워크임.
Flutter 개발을 시작할 때 알아야 할 기본적인 내용들을 정리했음.

---

📚 1. Flutter 위젯의 종류

Flutter는 모든 것을 위젯으로 다룸. 위젯은 화면에 보이는 UI 요소뿐만 아니라 레이아웃, 상호작용 등 모든 것을 포함함.

• StatefulWidget: 값이 바뀌면 다시 렌더링할 수 있는 위젯임. setState 함수를 사용하여 위젯의 상태를 변경하고 UI를 업데이트할 수 있음.

  
  

  class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
  }
  
  class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
  }

  
  

• StatelessWidget: 처음 한 번만 렌더링할 수 있는 위젯임. 한 번 그려지면 UI가 변경되지 않음.

  
  

  class MyStatelessWidget extends StatelessWidget {
  final String title;
  
  MyStatelessWidget({required this.title});
  
  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
  }

  
  

---

🎨 2. 위젯 배치 및 정렬

Flutter에서 위젯을 배치하고 정렬하는 데 사용되는 주요 개념들임.

• child: 하위 위젯이 한 개일 때 사용함.
  

  Container(
  child: Text('Hello World'),
  )

  
  
• children: 하위 위젯이 여러 개일 때 사용함.
  

  Column(
  children: [
    Text('First item'),
    Text('Second item'),
  ],
  )

  
  
• AspectRatio: 이미지 등의 비율을 맞출 때 사용함.
  

  AspectRatio(
  aspectRatio: 16 / 9, // 16:9 비율
  child: Image.network('https://example.com/image.jpg'),
  )

  
  
• Stack: 위젯이 위로 겹쳐서 쌓이는 방식임.
  

  Stack(
  children: <Widget>[
    Container(color: Colors.red, width: 100, height: 100),
    Container(color: Colors.blue, width: 80, height: 80),
  ],
  )

  
  
• Positioned: Stack 위젯 안에서 쌓인 위젯의 위치를 조정할 때 사용함.
  

  Stack(
  children: <Widget>[
    Container(color: Colors.red, width: 200, height: 200),
    Positioned(
      top: 20,
      left: 20,
      child: Container(color: Colors.blue, width: 100, height: 100),
    ),
  ],
  )

  
  

---

📏 3. EdgeInsets 이해하기: 마진과 패딩

Flutter에서는 CSS나 JavaScript와 다르게 EdgeInsets 클래스를 사용하여 margin과 padding을 지정함.

• EdgeInsets.all(5): 모든 방향(상하좌우)에 5만큼의 여백을 줌.
  

  Padding(
  padding: EdgeInsets.all(5.0),
  child: Text('All padding'),
  )

  
  
• EdgeInsets.only(top: 5): 특정 영역, 예를 들어 top에만 5만큼의 여백을 줌.
  

  Padding(
  padding: EdgeInsets.only(top: 5.0),
  child: Text('Top padding only'),
  )

  
  
• EdgeInsets.fromLTRB(5, 10, 0, 0): 각각 왼쪽(Left), 위(Top), 오른쪽(Right), 아래(Bottom) 순서로 여백을 지정함 (예: 왼쪽 5, 위 10).
  

  Padding(
  padding: EdgeInsets.fromLTRB(5.0, 10.0, 0.0, 0.0),
  child: Text('LTRB padding'),
  )

  
  
• EdgeInsets.symmetric(horizontal: 5, vertical: 10): 가로(왼쪽, 오른쪽)로 5, 세로(위, 아래)로 10만큼의 여백을 줌.
  

  Padding(
  padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
  child: Text('Symmetric padding'),
  )

  
  

---

⚙️ 4. 위젯 정렬 및 크기 조절

• mainAxisAlignment: 주 축(main axis)을 따라 위젯들을 정렬함. (예: Row에서는 가로, Column에서는 세로)
  

  Row(
  mainAxisAlignment: MainAxisAlignment.center, // 가로 중앙 정렬
  children: [Text('A'), Text('B')],
  )

  
  
• crossAxisAlignment: 교차 축(cross axis)을 따라 위젯들을 정렬함. (예: Row에서는 세로, Column에서는 가로)
  

  Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 세로 시작점 정렬
  children: [Text('A'), Text('B')],
  )

  
  
• mainAxisSize: 주 축의 크기를 조절함.
  

  Row(
  mainAxisSize: MainAxisSize.min, // 필요한 최소한의 공간만 차지
  children: [Text('A'), Text('B')],
  )

  
  
• Expanded: 자식 위젯이 부모 위젯의 남은 공간을 확장하여 채우도록 함.
  

  Row(
  children: [
    Text('Fixed Width'),
    Expanded(
      child: Text('Expanded Text that takes remaining space'),
    ),
  ],
  )

  
  
• Flexible: 자식 위젯이 부모 위젯의 남은 공간을 유연하게 채우도록 하지만, 필요한 공간만큼만 차지할 수 있도록 함.
  

  Row(
  children: [
    Text('Fixed Width'),
    Flexible(
      child: Text('Flexible Text that takes available space'),
    ),
  ],
  )