[Flutter] Chip 사용

태그 같은 느낌으로 사용하고싶었고, 필요했다.

 

유틸성 클래스를 작성했고, 사용방법은 아래와 같다.

 

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Chipbuilder{

  static Widget build(String label, Color color) {
    return Chip(
      labelPadding: EdgeInsets.all(0.1),

      label: Text(
        label,
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      backgroundColor: color,
      elevation: 6.0,
      shadowColor: Colors.grey[60],
      padding: EdgeInsets.all(4.5),
    );
  }
}

 Wrap(
                alignment: WrapAlignment.start,
                spacing: 1.0,
                runSpacing: 1.0,
                children: <Widget>[
                  Chipbuilder.build("${widget.gender}",Constants.appColor),
                  Chipbuilder.build("인원 ${widget.memberCnt}명", Constants.appColor),
                  Chipbuilder.build(
                      "${"${widget.date}".substring(5,7)}월"
                          "${"${widget.date}".substring(8,10)}일 "
                          "${"${widget.date}".substring(11,13)}시"
                          "${"${widget.date}".substring(14,16)}분",
                      Constants.appColor),
                  Chipbuilder.build("${widget.place}",Constants.appColor)

                ],
              ),

 

위와 같이하면, 칩빌더를 통해서 태그 같은느낌의 칩을 구현할 수 있다.