Flutter自定义Widget之IconTextButton图

IconTextButton

IconTextButton 是一个图文按钮，Flutter的RaisedButton按钮RaisedButton.icon()按钮只能实现左图右文字

IconTextButton.icon() 可以实现四种样式：
图在上文字在下，图在下文字在上，图在左文字在右，图在右文字在左

使用也很简单,其它属性设置和RaisedButton.icon()一样，
只需要设置属性iconTextAlignment，它是一个枚举值 :

 enum IconTextAlignment {
  iconTopTextBottom,//图在上文字在下
  iconBottomTextTop,//图在下文字在上
  iconLeftTextRight,//图在左文字在右
  iconRightTextLeft,//图在右文字在左
}

eg1:

 IconTextButton.icon(
  icon: Icon(Icons.add_alarm,size: 80,),
  label: Text("图下文上"),
  color: Colors.lightBlue,
  textColor: Colors.white,
  elevation: 4.0,
  iconTextAlignment: IconTextAlignment.iconBottomTextTop,
  onPressed: (){
    onClick("图下文上");
  },
),

eg2:

 Column(children: <Widget>[

            Container(height: 30,),

            IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图左文右"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconLeftTextRight,
            onPressed: (){
              onClick("图左文右");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图右文左"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconRightTextLeft,
            onPressed: (){
              onClick("图右文左");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图上文下"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconTopTextBottom,
            onPressed: (){
              onClick("图上文下");
            },
          ),

          Container(height: 30,),

          IconTextButton.icon(
            icon: Icon(Icons.add_alarm,size: 80,),
            label: Text("图下文上"),
            color: Colors.lightBlue,
            textColor: Colors.white,
            elevation: 4.0,
            iconTextAlignment: IconTextAlignment.iconBottomTextTop,
            onPressed: (){
              onClick("图下文上");
            },
          ),
          ],)

IconTextButton.gif

使用方法：

直接把IconTextButton.dart文件拖入项目中，然后在使用的文件中导入
import 'package:自己存放的路径/IconTextButton.dart';即可使用;
如果不满足需求，完全可以在代码上面直接进行需改,
比如：图片和文字的间隔或者文字和图片到边的距离

源码文件下载地址：

获取源码->IconTextButton