としおの読書生活

田舎に住む社会人の読書記録を綴ります。 主に小説や新書の内容紹介と感想を書きます。 読書の他にもワイン、紅茶、パソコン関係などの趣味を詰め込んだブログにしたいです。

タグ:Flutter

3753817_s

Flutterでカメラを使ったアプリを作ってみたところ、エミュレータでは正しく動作したのですが、実機で動かしてみたところカメラが起動しませんでした。

この問題に対する解決策を調べたので紹介します。

今回は、以下のサンプルコードを使ってカメラが動くことを確認しています。





実機でカメラを動かす方法


結論になりますが、実機でカメラを動かすためには、

android→app→src→main→AndroidManifest.xmlに

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"/>

の一行を入れてあげる必要がありました。これを追加しただけでカメラが起動するようになりました。

どこに入れればわからないという人もいると思うので、AndroidManifest.xmlのサンプルを以下に乗せておきます。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.camera_sample">-
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"/>
<application
android:label="camera_sample"
android:icon="@mipmap/ic_launcher">
android:requestLegacyExternalStorage="true"
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<!-- Displays an Android View that continues showing the launch screen
Drawable until Flutter paints its first frame, then this splash
screen fades out. A splash screen is useful to avoid any visual
gap between the end of Android's launch screen and the painting of
Flutter's first frame. -->
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>






AndroidManifest.xmlを変更する必要があった理由


AndroidManifest.xmlを変更する必要があった理由ですが、Android11以降でデバイスにアクセスする方法が変更されたことが原因みたいです。

Android11以前の端末なら、上記のような変更なしでもカメラにアクセスできるみたいですね。

Android10nまでの情報がWeb上に多く存在していたため、原因を突き止めるのになかなか苦戦してしまいました…。



まとめ


Android11以降ではカメラを使用するためには、AndroidManifest.xmlを変更する必要がありました。

同じことで悩んでいる人の参考になれば嬉しいです。





本記事ではAndroid Studioで作成したFlutterアプリを実機でデバッグする方法を紹介していきます。

例としてgoogle pixel 4a でFlutterのサンプルアプリを動かしていきますが、開発言語や端末が違う場合でも基本的に同じ方法で実行することができます。



Android端末を開発者設定に変更する


Android Studioで開発したアプリを実行するためには、Android端末の開発者設定をONにする必要があります。

やり方ですが、最初に設定→デバイス情報画面を開きます。

Screenshot_20210530-220644

次にデバイス情報画面をスクロールして一番下にある、ビルド番号を7回タップします。

Screenshot_20210530-220654

するとPINの入力が求められますのでPINを入力してください。

これで開発者設定をONにすることができました。



アプリを実行する


Android端末の設定ができたところでアプリを実行してみましょう。

今回はFlutterのサンプルプロジェクトを実行していくので、Android Studioを作って新規プロジェクトを作成します。

キャプチャ

新規プロジェクトが作成できたらUSBケーブルを使い、PCとandroid端末を接続します。

接続が成功したら、Debug端末の選択メニューに自身のAndroid端末の機種名が表示されるので、そのたんまつを選択してください。

今回の例ではgoogle pixel 4aを使用しているので、Pixel 4a(mobile)を選択します。

キャプチャ

端末を選択することができたら、実行ボタンを押下してください。

キャプチャ


すると自分の端末でアプリが実行されます。

Screenshot_20210530-233826





実行できない場合の対処法


上記の方法で実行できない場合の対象方を紹介していきます。


USBケーブルが充電専用でデータ転送ができない場合


充電しかできないようなUSBケーブルを使用している場合、実行することができません。

この場合は、データ転送ができるケーブルを買いなおすしか対処法がありません。

以下のケーブルはデータ転送にも対応しています。




USBデバッグ設定がOFFになっている


ケーブルはデータ転送用だが実行ができない場合、開発者向けオプションのUSBデバッグ設定がOFFになっている可能性があります。

この場合、設定→システム→詳細設定→開発者向けオプション設定画面を開き、USBデバッグ設定をONにしましょう。



まとめ


本記事では、自分が開発したAndroidアプリを実機で実行する方法を紹介しました。

エミュレータでのテストには限界があると思うのでぜひ実機でデバッグする方法をマスターしてください。







Flutterでアプリを作ってみようとしたところ様々なアプリでよく目にする、

キャプチャ

のアイコンの出し方が分からず小一時間ほど悩んだので、同じことで悩む人がへるように出し方を書いておきます。

記事を書いたあとに気づいたのですが、Drawerを設定したらデフォルトでハンバーガーボタンが設定されるようで私の調査は無駄に終わりました。



Drawer以外でハンバーガーボタンを使いたいという人は参考にしてください。(そんな人いないだろ)




『三』(ハンバーガーボタン)の出し方


結論からですが『三』のアイコンは以下のコードで出すことができます。

Icons.dehaze_sharp

キャプチャ


ちなみに私はこれを見つけるためにFlutterの公式のアイコン画像のページのアイコンとひたすらにらめっこしていました。




上記で紹介したもののほかに、線の細さが違う似たようなアイコン他に3つありました。

キャプチャ

芸術的センスにかけている私からしてみたらこれらをどう使い分けたらいいか分からないという。



サンプルコード


以下は、『三』をヘッダーに表示させるサンプルコードになります。

import 'package:flutter/material.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
// 表示する Widget の一覧

Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
appBar:AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.dehaze_rounded), // アイコンの種類
)
)
),
);
}
}


キャプチャ





Flutterでドローワーメニューの表示のさせ方を調べたのでまとめておきます。



ドローワーメニューを使ってみる


ドローワーメニューはScaffoldでDrawerのプロパティを設定することで使用することができます。

AppBarプロパティを定義していない場合、画面にヘッダが存在しないためドローワーメニューも表示されなくなるので注意が必要です。


サンプルコード

import 'package:flutter/material.dart';
void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
// 表示する Widget の一覧

Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
appBar: AppBar(
title: Text('Drawer Menu'), // タイトル名
centerTitle: true, // タイトルの表示位置
),
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('ヘッダー'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(

title: Text("ボタン"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
title: Text("hello"),
subtitle: Text("あいさつ"),
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.search), // アイコンの種類
),
trailing: Icon(Icons.arrow_forward),
),
],
),
),
),
);
}
}


キャプチャ

ドローワーメニューに表示させる内容はListTileを変更することで簡単に変えることができました。



ドローワーメニューのアイコンの変え方


ドローワーメニューを開くボタンはデフォルトではハンバーガーボタンになっています。

このアイコンを変更するためには、AppBarを変更する必要があります。

先ほどのサンプルコードからAppBarを以下のように設定することでアイコンが変わります。

appBar: AppBar(
leading: Builder(
builder: (context) => IconButton(
icon: Icon(Icons.settings),
onPressed: (){
Scaffold.of(context).openDrawer();
}),
),
title: Text('Drawer Menu'), // タイトル名
centerTitle: true, // タイトルの表示位置
),

キャプチャ

ちなみにドローワーメニューを右から表示させるEndDrawerを使用している場合は、openDrawerの部分をopenEndDrawerに変更することでアイコンを変更することができます。





flutter-top

本記事では、Flutterで作成したアプリの画面にフッターを追加する方法を説明します。



フッターを実装する


今回、フッター部分はmain.dartとは別のfooter.dartというファイルを作成してそちらに実装していきます。

footer.dartはmain.dartと同じフォルダに作成します。

事前準備として最初にmain.dartを作ります。

main.dart
import 'package:flutter/material.dart';
import 'footer.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
bottomNavigationBar: Footer(),
),
);
}
}

bottomNavigationBar:と書かれている部分で、これから実装していくFooterクラスを呼び出しています。


画面にフッターを追加する


まずは画面にフッターを追加していきます。

とりあえず見た目だけなので、タップしても何も動作は行われません。

今回はフッターにはHomeアイコンとSearchアイコンを追加していきます。

footer.dart
import 'package:flutter/material.dart';

class Footer extends StatefulWidget {
const Footer();

@override
_Footer createState() => _Footer();
}

class _Footer extends State{
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home), // アイコン
title: Text('Home'), // ボタン名
),
BottomNavigationBarItem(
icon: Icon(Icons.search), // アイコン
title: Text('Search'), // ボタン名
),
],
);
}
}

これでアプリを実行してみると以下のような画面になります。

キャプチャ

フッターに二つのボタンが追加されたことが確認できましたね。


選択時のアイコンの色を設定する


次にアイコンが選択されているときの色を設定していきます。

デフォルトでは青色ですが、今回は緑色にしてみましょう。

footer.dart
import 'package:flutter/material.dart';

class Footer extends StatefulWidget {
const Footer();

@override
_Footer createState() => _Footer();
}

class _Footer extends State{
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home), // アイコン
title: Text('Home'), // ボタン名
),
BottomNavigationBarItem(
icon: Icon(Icons.search), // アイコン
title: Text('Search'), // ボタン名
),
],
// 追加
selectedItemColor: Colors.greenAccent, // 選択時の色
unselectedItemColor: Colors.black45, // 非選択時の色
);
}
}

selectedItemColor:で選択時の色を設定することができ、unselectedItemColor:で非選択時の色を設定することができます。

キャプチャ


アイコンのタップで状態を切り替える


現状Searchアイコンをタップしても状態が切り替わりません。

そこで状態を切り替えることができるように改造していきます。

footer.dart
import 'package:flutter/material.dart';

class Footer extends StatefulWidget {
const Footer();

@override
_Footer createState() => _Footer();
}

class _Footer extends State{
int m_selectedIndex = 0;

@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home), // アイコン
title: Text('Home'), // ボタン名
),
BottomNavigationBarItem(
icon: Icon(Icons.search), // アイコン
title: Text('Search'), // ボタン名
),
],
currentIndex: m_selectedIndex, // 選択中のアイコンのインデックス
onTap: _onItemTapped, // タップされたときのイベント
selectedItemColor: Colors.greenAccent, // 選択時の色
unselectedItemColor: Colors.black45, // 非選択時の色
);
}

void _onItemTapped(int index) {
setState( () {
m_selectedIndex = index;
});
}
}

今回新たに_onItemTappedという関数を追加しました。

これは、アイコンをタップしたときに呼び出される関数で、アイコンがタップされるとm_selectIndexの値を対応したindexの番号に変更するという処理を行っています。

ダウンロード



まとめ


今回はシンプルなフッターを作成していきました。

本記事では、フッターの動きだけに着目したため、フッターをタップしても画面自体は遷移しません。

そのうちフッターをタップしたさいの画面の遷移のさせ方に関する記事も書いてみたいです。




↑このページのトップヘ