FLUS - 4 week

상태 저장 및 상태 비저장 위젯

(Stateful and stateless)

버튼 이벤트 처리 (3항 연산자)

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

  // ···
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  // ···
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: const EdgeInsets.all(0),
          child: IconButton(
            padding: const EdgeInsets.all(0),
            alignment: Alignment.centerRight,
            icon: (_isFavorited
                ? const Icon(Icons.star)
                : const Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child: SizedBox(
            child: Text('$_favoriteCount'),
          ),
        ),
      ],
    );
  }
  
  void _toggleFavorite() {
  setState(() {
    if (_isFavorited) {
      _favoriteCount -= 1;
      _isFavorited = false;
    } else {
      _favoriteCount += 1;
      _isFavorited = true;
    }
  });
 }
}

상위 위젯에서 State를 관리한다.

• 다음 예에서 TapboxB는 콜백을 통해 해당 상태를 부모로 내보냅니다. TapboxB는 상태를 관리하지 않기 때문에 StatelessWidget을 서브클래싱합니다.

ParentWidgetState 클래스

• TapboxB 의 _active상태를 관리합니다.
  _handleTapboxChanged()상자를 탭할 때 호출되는 메서드를 구현 합니다.
  setState() 상태가 변경되면 UI 업데이트 를 호출 합니다.
  TapboxB 클래스:

• 모든 상태가 부모에 의해 처리되기 때문에 StatelessWidget을 확장합니다.
  탭이 감지되면 부모에게 알립니다.

import 'package:flutter/material.dart';

// ParentWidget manages the state for TapboxB.

//------------------------ ParentWidget --------------------------------

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

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//------------------------- TapboxB ----------------------------------

class TapboxB extends StatelessWidget {
  const TapboxB({
    super.key,
    this.active = false,
    required this.onChanged,
  });

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

제약조건 이해

• 위젯은 부모가 지정한 제약 조건 내에서만 자체 크기를 결정할 수 있습니다. 이것은 위젯이 일반적으로 원하는 크기를 가질 수 없다는 것을 의미합니다.

• 자식 위젯은 부모위젯의 위치정보를 통해 정렬되며 지정하지 않을 경우 화면에서 위치를 결정하지 않습니다.

• 부모의 크기와 위치는 차례로 자신의 부모에 따라 달라지므로 전체 트리를 고려하지 않고 위젯의 크기와 위치를 정확하게 정의하는 것은 불가능합니다.

• 자식이 부모와 다른 크기를 원하고 부모가 이를 정렬할 정보가 충분하지 않은 경우 자식의 크기는 무시될 수 있습니다. 정렬을 정의할 때 구체적으로 지정하십시오.