一 摄像头

最近想监控一下家里的猫在我上班时候干什么,本来打算买个小米或360的监控摄像头,价格也不贵。 想到树莓派吃灰了一段时间了,就想利用树莓派来做监控。树莓派官方发布了2款CSI接口的摄像头,当然树莓派有USB接口也可以使用USB摄像头。

树莓派摄像头

以上是官方摄像头的2个版本对比。型号是OV5647和IMX219,参考: Camera Module

继续阅读

0

前面已经分析完了Flutter程序初始化的的过程,当FlutterView创建完成之后,Engine已经准备好了。这个时候FlutterView被设置到Activity上,并且增加了对应的LaunchView。然后偶FlutterActivityDelegate会开始执行Flutter程序。

 public void onCreate(Bundle savedInstanceState) {
    
        String[] args = getArgsFromIntent(activity.getIntent());
        FlutterMain.ensureInitializationComplete(activity.getApplicationContext(), args);

        flutterView = viewFactory.createFlutterView(activity);
        if (flutterView == null) {
            FlutterNativeView nativeView = viewFactory.createFlutterNativeView();
            flutterView = new FlutterView(activity, null, nativeView);
            flutterView.setLayoutParams(matchParent);
            activity.setContentView(flutterView);
            launchView = createLaunchView();
            if (launchView != null) {
                addLaunchView();
            }
        }

        if (loadIntent(activity.getIntent())) {
            return;
        }

        String appBundlePath = FlutterMain.findAppBundlePath(activity.getApplicationContext());
        if (appBundlePath != null) {
            runBundle(appBundlePath);
        }
    }

前面我们已经分析过了runBundle方法在Java层的实现,最终调用了FlutterJNI的方法:

继续阅读

0

前面三篇文章我们通过Flutter Demo程序,从程序的初始化开始,到MainActivity的初始化(FlutterActivity),然后到FlutterView的初始化, 最后到FlutterView运行一个Flutter Bundle。整个过程中我们都是关注在Java层的代码。 但是通过FlutterJNI类我们知道,很多东西都是在C++层也就是Flutter Engine中实现的,  也就是Flutter.jar中的flutter.so文件。 所以这一篇从FlutterEngine的角度来看看初始化。

 

 

一 准备Flutter Engine源码

 

前面介绍Flutter.jar的时候有简单介绍一下下载Flutter Engine的源码。 源码地址:https://github.com/flutter/engine

建议使用git命令直接下载master分支

git clone https://github.com/flutter/engine.git

然后根据你Flutter SDK的版本来切换到对应的commit

➜  io git:(3757390fa) ✗ flutter --version
Flutter 1.2.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8661d8aecd (7 weeks ago) • 2019-02-14 19:19:53 -0800
Engine • revision 3757390fa4
Tools • Dart 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

切换到SDK Engine版本对应的源码,上面就是Flutter SDK 1.2.1对应的Engine的commit ID

flutter_engine git:(master) ✗ git checkout 3757390fa4
HEAD is now at 3757390fa Roll src/third_party/dart ecd7a88606..0a7dcf17eb (4 commits)

继续阅读

0

前面一篇介绍了承载Flutter的Activity的初始化过程,通过分析FlutterActivityDelegate我们知道了FlutterView是真正运行Flutter App的地方,所以这一篇文章主要来看一看FlutterView的功能。

 

 

一 FlutterView 类结构

 

先看一下FlutterView的UML图。

  • 继承SurfaceView,它的内部有两个线程即主线程和渲染线程,使用渲染线程中向屏幕上绘图可以避免主线程阻塞,从而提高了程序的反应速度。使用了双缓冲机制。
  • 实现BinaryMesaenger接口, 这个接口定义了Android代码和Flutter代码直接通信的方式,此接口还有2个内部接口。 FlutterView实现了这个接口,拥有了和flutter通信的的能力
  • 实现TextureRegistry接口,这个接口主要是创建一个SurfaceTexture对象,使用SurfaceTextureEntry包装起来,拥有唯一的ID。
  • 实现AccessibilityStateChangeListener接口,主要用来监听系统accessibility 状态变化的。

继续阅读

0

前面一篇介绍了Flutter Android App在进程启动时做的初始化,这一篇主要看一下Flutter的页面显示需要做的初始化。 在我们的Demo中只有一个MainActivity页面。

 

一 MainActivity

 

先看一下这个主页的声明

   <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

没有什么特别,只是声明了一个meta-data,指定了显示一个splash画面,看一下这个页面的具体实现

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
  }
}

我们的主页继承与FlutterActivity,只在onCreate中调用了下面的方法

继续阅读

0

前面已经简单看过一个全新的Android Flutter应用程序的创建、编译以及安装包的结构。现在可以来看看Flutter程序是如何在Android上运行的。分析的应用程序是之前使用flutter create创建的Demo。功能就是点击界面上的【+】,然后界面上的数字递增显示。 我们只打开其中的Android项目。 flutter项目在最外层的lib/main.dart文件中。

 

 

一 Android项目结构

 

整个Demo的Android项目很简单,只有一个MainActivity页面和一个GeneratedPluginRegistrant文件。

看一下Activity中的代码, 这也太简单了,仅仅是调用了一下 GeneratedPluginRegistrant的方法, 没有任何UI相关的代码。

继续阅读

1+

一 创建Flutter应用

 

如果使用Android Studio 或者Visual Studio Code 可以从IDE中创建一个新Flutter应用程序,以AS为例,这里可以创建四种类型的项目。

当然也可以使用Flutter命令从命令行创建,通过help命令可以看有那些参数, 一般按下面命令就可以创建一个新的flutter项目

flutter create --help

➜flutter create  --org com.cc.flutter.hello flutter_hello
Creating project flutter_hello...

Running "flutter packages get" in flutter_hello...                 10.9s
Wrote 67 files.

All done!

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

   cd flutter_hello     flutter run

Your application code is in flutter_hello/lib/main.dart.

继续阅读

0

这一篇主要介绍一下Flutter的SDK环境搭建,网上关于环境搭建的文章很多,但是介绍基本都没有介绍SDK里有些什么。本文以Mac上安装为例,因为主要涉及到SDK内部,所以和其他平台应该是一致的。

官方的安装文档: https://flutterchina.club/get-started/install/

 

 

一 获取Flutter SDK

 

官网下载页: https://flutter.dev/docs/development/tools/sdk/archive

GitHub下载页: https://github.com/flutter/flutter/releases

 

在国内Flutter官网可能无法访问,一般大家都会去github上下载。下面是github上的release包,最新版是v1.3.13

从GitHub下载有个问题是大家容易忽略的,就是版本的channel。如果能打开官网的网页,我们可以发现Flutter SDK 有Stable、Beat、Dev、Master 四个渠道。 其中Stable版本到目前为止只release了两个版本,通过对比发现,GitHub上release的是Dev版本。

继续阅读

0

Flutter应该是目前前端最火热的一个词了,移动端的发展从Web到H5、到Native APP、到Hybrid、到React Native 然后到现在的Flutter。所有一起都是为了解决移动端需求的快速迭代、快速更新、减少三端的重复开发量。去年年初就开始大概了解了一下Flutter,前年也是看了一段RN,只是没有很深入,因为工作上也没用的上。所以这次打算边学边记录学习一门新的技术,并不建议装好环境马上动手写代码,而是应该先去了解整个系统的结构、原理、设计,甚至是选择性的阅读源码。这更有助于写好代码。 毕竟读别人的代码比自己写要难得多。

 

后续文章都如无特殊说明,都是基于以下版本

Flutter 1.2.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8661d8aecd (6 weeks ago) • 2019-02-14 19:19:53 -0800
Engine • revision 3757390fa4
Tools • Dart 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

 

 

一 Flutter是什么

 

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
优点
  • 快速开发:毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
  • 富有表现力和灵活的UI:快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。
  • 原生性能:Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。

以上都是官网的介绍,简单说Flutter是一个跨平台的UI框架,可以实现写一份代码同时在IOS和Android平台上执行。并且有着比H5和RN更好,基本接近原生应用的性能。Flutter并不是用来取代Android和IOS的原生开发,它必须以原生页面作为Host来执行。 它不是一个新的平台,只是一个UI框架,因为可以跨平台,所以可以减少两端UI的开发量。 但是并不能替代原生开发,因为很多功能还是需要调用原生系统的接口。

继续阅读

0