flutter ui html,FlutterUI-自定义Button

Flutter版本-v1.0.0

按钮控件常用api

常用普通圆角按钮

常用按钮的写法，很简单也很美观。

new RaisedButton(

child: new Text("登录"),

color: Colors.blue,

textColor: Colors.white,

onPressed: () {

_login();

},

disabledColor: Colors.grey,

disabledTextColor: Colors.white,

disabledElevation: 4,

// onPressed: null,// 设置为null即为不可点击(disabled)状态

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)), //圆角大小

),

效果：

普通圆角按钮

但是UI稿往往会出现各种按钮，所以又会踩坑

图片+文字按钮

用InkWell + Stack来形成层级

new InkWell(

child: new Stack(

alignment: Alignment.center,

children: [

new Image.asset("images/ic_launcher_round.png"),

new Text("登录",

style: new TextStyle(

fontSize: 24,

fontWeight: FontWeight.bold,

color: Colors.red

),),

],

),

onTap: () { },

),

效果：

图片+文字按钮

渐变色+圆角+文字 按钮

这个看似也容易，但由于RawMaterialButton有最小宽高，如果child宽高较小，会出现多余的灰色背景，例如：

child宽高较小

用了InkWell + Container的方案，结果也不理想，因为没有点击的阴影效果，波纹作用于背景也不明显。

查阅了很多，最终找到了buttonTheme这个属性，可以在MaterialApp的theme里设置即可作用全局，使全局的button都没有最小宽高。

void main() {

// debugPaintSizeEnabled=true;

runApp(new MaterialApp(

theme: new ThemeData(

primaryColor: AppColors.colorPrimary,

accentColor: Colors.blue,

buttonTheme: new ButtonThemeData(

minWidth: 0,

height: 0,

padding: EdgeInsets.all(0),

buttonColor: Colors.transparent

)),

home: new WanAndroidApp()));

}

然后再运用RaisedButton + Container即可达到渐变色+圆角+文字 按钮的效果，同理其他特殊的按钮均可按此实现。

new RaisedButton(

child: new Container(

decoration: BoxDecoration(

border: Border.all(color: Colors.red, width: 1.0),

borderRadius: BorderRadius.circular(8.0),

gradient: LinearGradient(colors: [

Colors.orange,

Colors.blue,

]),

),

child: new Text("登录"),

padding: EdgeInsets.fromLTRB(16, 8, 16, 8),

alignment: Alignment.center,

),

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(8.0)), //圆角大小,与BoxDecoration保持一致，更美观

onPressed: () {},

textColor: Colors.white,

),

效果：

渐变色+圆角+文字 按钮

至此，大部分的Button样式应该都可以实现了～