亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【備戰春招】第8天 實戰拍照 App 的開發

標簽:
Android

课程名称Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节:Flutter入门:基础知识十六讲
课程讲师CrazyCodeBoy

课程内容

1.Flutter应用中修改主题

如果想要实现动态修改 Flutter 应用的主题,核心是修改main.dart中 MaterialApp 的主题,部分示例代码:

class DynamicThemeState extends State<DynamicTheme> {
  Brightness _brightness = Brightness.light;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          brightness:_brightness,
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            ...
          ),
          body: Column(
            children: <Widget>[
              ElevatedButton(//RaisedButton 已过时,改为ElevatedButton
                onPressed: () {
                  setState(() {
                    if (_brightness == Brightness.dark) {
                      _brightness = Brightness.light;
                    } else {
                      _brightness = Brightness.dark;
                    }
                  });
                },
                child: const Text('切换主题abc',style: TextStyle(fontFamily: 'RubikMonoOne'),),
              ),
              RouteNavigator()
            ],
          ),
}

2.Flutter中如何使用自定义字体

  • 字体文件添加到项目中,比如下载字体文件添加到 fonts 目录;
  • 在 pubspec.yaml 中启用字体;
  • 代码中使用字体;

3.Flutter实战-拍照 App 的开发

项目介绍

  • 页面上有一个相机按钮,单击会弹出选择对话框;
  • 对话框中选择“拍照”或“从相册选择”
  • 选择“拍照”后,会打开系统照相机,拍照结束后将照片显示在页面上;
  • 选择“从相册选择”,会打开系统相册,将选中的图片显示在页面上;
  • 页面上显示的图片进行了圆角裁切,右上有关闭按钮,点击会删除图片;
  • 页面上现实的图片会自动进行换行展示。

项目实现过程

  • 项目中用到了 image_picker 插件,需要在 pubspec.yaml 中引入;
  • 适配 AndroidX,在Flutter v1.12.13 以后创建的Flutter 项目默认已经支持 AndroidX,如果是低于这个版本,可以按照AndroidX migration中的内容,进行 AndroidX 的兼容处理。
  • 实现圆角效果用到了 ClipRRect 组件,圆角的删除按钮用到了 ClipOval 组件。

获取图片的关键代码:

Future getImage(bool isTakePhoto) async {
    Navigator.pop(context);
    var image = await ImagePicker().pickImage(
        source: isTakePhoto ? ImageSource.camera : ImageSource.gallery);
    if (image != null) {
      setState(() {
        _images.add(image);
      });
    }
  }

总结

通过一个很小的项目将这一章的内容进行总结,除了熟悉 Flutter 的语法外,还要熟悉 Flutter 布局文件书写方式与 Android 的不同。
图片描述

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
移動開發工程師
手記
粉絲
12
獲贊與收藏
17

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消