如何使用Inkwell制作尽可能通用的按钮?

时间:2019-08-19 17:23:37

标签: flutter dart flutter-layout

当单词通过参数传递时,按钮会适应单词的大小。我了解有必要使用该方法计算单词的length

我开发了一个部分,但并非所有单词都一样

class CategoryButton extends StatefulWidget {
  final String categoryText;

  CategoryButton({Key key, @required this.categoryText});

  @override
  State<StatefulWidget> createState() {
    return _CategoryButton();
  }
}

class _CategoryButton extends State<CategoryButton> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.only(left: 16.0, top: 16.0),
        height: 25.0,
        width: widget.categoryText.length.toDouble() * 8,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          color: Colors.blueGrey,
        ),
        child: Center(
          child: Text(widget.categoryText,
              style: TextStyle(
                  fontSize: 11.5, fontFamily: "Roboto", color: Colors.white)),
        ),
      ),
    );
  }
}

0 个答案:

没有答案