图像

1 article

404 adobe-xd app开发 bbs centos curl dart discourse ditto dns docker fastjson flame flutter flutter-web fork git github hexo homebrew idea jar java json just-for-fun kotlin linux macos map maven microsoft应用商店 minecraft mybatis mybatis-plus mysql nginx node npm null nvm object php pip pr python react spring springboot sql stack-overflow swagger ubuntu unicode vim vue win10 windows wordpress yum 上线准备 书籍资源 关联查询 出生日期 前端 博客排版 后端 国内加速 国际化 图像 字段 字符编码 字符转义 容器 常用操作 常用组件 常识 序列化 开源 快速开发 技术书籍 搜狗 支付宝 效率 教程 数据库 文件编辑 时区 极客用语 毛玻璃 游戏开发 环境部署 生日 空格 缓存 网络配置 访问加速 词库 踩坑 输入法 运维 闲鱼 阿里巴巴 项目信息
images/default3.jpg

在Flutter中设置背景图片 / background image

Wednesday, May 27, 2020

有时我们需要给APP的某个页面或某个widget添加背景图. 本篇文章就来记录下如何在Flutter中设置背景图片. 效果 有图有真相, 先来看下我们本篇博客将实现的最终效果: 速度快的同学直接看下面的核心代码! 实战开始 创建Flutter项目 创建一个新的Flutter项目, 运行查看一下: 空白的, 啥也木有. 添加图片资源 这里为大家提供一个好看的背景图: Pexels 上的 Emre Can 拍摄的照片 下载此图片, 重命名为background.jpg. 我们来将其添加至Flutter项目中. 创建资源目录 创建目录./assets/images, 将上面的图片放到该目录下: 引入pubspec.yaml 进入pubspec.yaml, 将背景图片资源文件路径assets/images/background.jpg进行导入: flutter: uses-material-design: true assets: - assets/images/background.jpg [epcl_box type=“notice”]这里一定要注意缩进, 若格式有误将会出错![/epcl_box] 进行package get或在终端中输入: flutter packages get 展示背景图 回到./lib/main.dart, 进行代码替换: 找到: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ) 替换为:
1 minute read