如何在抖动中进行芯片按钮的设计

Question

我正在学习flutter。我怎么能做下面的设计呢？忽略容器的边框，要制作一个芯片按钮

​

​

Answer 1

这就是你提到的按钮设计

ElevatedButton(
      onPressed: () {},
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.white),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red),
          ),
        ),
      ),
      child: Text(
        'data',
        style: TextStyle(color: Colors.black),
      ),
    );

Answer 2

试着阅读这篇文章，你会找到答案的

chip-widgets

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)),
    ],
  );
}