Flutter_w8

• chip

  

  • chip은 Material 기본제공 위젯이다.
  • 라벨링을 하거나 숫자정보 등을 표시할 수 있다.
  • chip snippet

    Widget _buildChip(String label, Color color) {
        return Chip(
          labelPadding: EdgeInsets.all(2.0),
          avatar: CircleAvatar(
            backgroundColor: Colors.white70,
            child: Text(label[0].toUpperCase()),
          ),
          label: Text(
            label,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          backgroundColor: color,
          elevation: 6.0,
          shadowColor: Colors.grey[60],
          padding: EdgeInsets.all(8.0),
        );
      }
    }
    
    chipList() {
      return Wrap(
        spacing: 6.0,
        runSpacing: 6.0,
        children: <Widget>[
          _buildChip('Gamer', Color(0xFFff6666)),
          _buildChip('Hacker', Color(0xFF007f5c)),
          _buildChip('Developer', Color(0xFF5f65d3)),
          _buildChip('Racer', Color(0xFF19ca21)),
          _buildChip('Traveller', Color(0xFF60230b)),
        ],
      );
    }

• ProgressIndicator Component

  • LinearProgressIndicator
  • CircularProgressIndicator
    • 아래와 같이 valueColor를 이용해 원하는 색상을 설정할 수 있다.
    • 단일 색상을 원한다면 AlwaysStoppedAnimation을 사용한다.

      CircularProgressIndicator(
      	valueColor:
      		AlwaysStoppedAnimation<Color>
      			(Colors.green),
      );

    • 2차 색상을 원하면 backgroundColor 파라미터를 설정한다.

      CircularProgressIndicator(
      	backgroundColor: Colors.grey,
      );

    • value 파라미터를 이용해 진행률을 표시할 수 있다.

      CircularProgressIndicator(
      	value: _downloadPercentage,
      );

    • 업데이트된 값으로 재설정하려면
      • AnimatedBuilder와 StreamBuilder 등 내에 setState를 호출하거나 알림 표시기를 구동할 수 있다.

• Tooltip

  • Tooltip 위젯을 활용하여 내용을 편집하고 텍스트를 넣을 수 있다.

    Tooltip(
    	message: 'Dash',
    	child: MyVisualWidget(),
    )

    • verticalOffset, height 파라미터를 통해 Tooltip상의 수직간격, 높이 등을 설정할 수 있다.
  • IconButton과 같은 중요 위젯은 이미 Tooltip에 있으므로 메시지 파라미터만 설정하면 간단하게 사용할 수 있다.

• Card

  • 카드 형태의 위젯이다.
  • 보통 ListView, GridView와 같은 위젯에 감싸서 사용한다.
  • card snippet
    • shape : RoundedRectangleBorder(borderRadius: BorderRadius.circular(값),) 을 사용하면 둥글게 나타낼 수 있다.
    • elevation은 그림자의 깊이를 나타내는 파라미터이다.

      class FilledCardExample extends StatelessWidget {
        const FilledCardExample({super.key});
      
        @override
        Widget build(BuildContext context) {
          return Center(
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0)),
              elevation: 30,
              color: Theme.of(context).colorScheme.surfaceVariant,
              child: const SizedBox(
                width: 300,
                height: 100,
                child: Center(child: Text('Filled Card')),
              ),
            ),
          );
        }
      }