Flutter Button 图文分析、效果浏览

题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧


本文章首发于微信公众号(biglead) 我的大前端生涯 ,同步刊登各技术论坛。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


1 Flutter 提供的Button比较多

  Widget buildRaisedButton(){
    //它默认带有阴影和灰色背景。按下后,阴影会变大
    return RaisedButton(
      child: Text("RaisedButto"),
      onPressed: () => {},
    );
  }

在这里插入图片描述



  Widget buildFlatButton(){
    //FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色:
    return FlatButton(
      child: Text("登录"),
      onPressed: () => {},
    );
  }

在这里插入图片描述


  Widget buildOutlineButton(){
    //OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱):
    return OutlineButton(
      child: Text("登录"),
      onPressed: () => {},
    );
  }

在这里插入图片描述


  Widget buildIconButton(){
    return IconButton(
      icon: Icon(Icons.thumb_up),
      onPressed: () => {},
    );
  }

在这里插入图片描述

2 为FlatButton设置一个圆角背景

在这里插入图片描述

  Widget buildCustomButton(){
    return FlatButton(
      //按钮文字颜色
      textColor: Colors.white,
      //按钮禁用时的背景颜色
      disabledColor:Colors.grey,
      //按钮禁用时的文字颜色
      disabledTextColor: Colors.grey,
      //正常状态下的背景颜色
      color: Colors.blue,
      //按钮按下时的背景颜色
      highlightColor: Colors.blue[700],
      //按钮主题,默认是浅色主题
      colorBrightness: Brightness.dark,
      //外形
      splashColor: Colors.grey,
      // button 显示的文字
      child: Text("Submit"),
      //圆角边框
      shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      //按钮点击回调
      onPressed: () => {},
    );
  }


【1】 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒点击查看提示

在这里插入图片描述


【2】 本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页