Flutterで以下の「Battery Optimizer」というアプリを開発していた時のこと
インジケーターと呼ばれるバッテリーの残量を円を使って表示する部分を作っていた時、以下の記述で「lerp」というのが何をするのかわからなかったので調べてみた。
//割合(0~1.0)からグラデーション色に変換
final color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;
【leapとは】
単語的には「Linear interpolation」とのことで線形補間という意味を指す。
【使い方や意味】
lerpは通常3つの引数を取るようになっているそうです。
lerp(start, end, t);
これはstartからendを使用して線形補間をしており、tで取得する値を決めています。
t=0でstart、t=1でendを選択し、t=0.5だとstartとendの中間を取得します。
ここで上記のソースコードを見てみると
inal color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;
lerpの引数は1つしか取っていません。ColorTweenの中にbeginとendを書いているためです。
したがってperという変数の値によってbeginとendで設定した色をグラデーションのように変化していくという記述となっています。
Flutterを書いていると、Cardを使う場面が出てくることと思います。
そこでCard内に'elevation'という設定をみたことはないでしょうか？
実はこの'elevation'という設定はCardに影をつけることができます。(CardだけでなくAppbarもできるらしい)
Card(
elevation: 8,
child: Container(
width: 120,
height: 100,
),
),
以上がelevationについての説明となります。
これをやるとやらないでUIのオシャレ度が変わってくるので、余裕があればぜひ試してみましょう。
今回はflutter-study.devのAdmin Mobileというものを作成してみました。以下の記事のものです。
基本的には書いてある通りですが、1点つまったところがあったので書いておきます。
詰まったところは以下の部分です。
const _Postのところでkeyを使ってコンストラクタに渡しているのですが、デフォルトで値がnullになっているのにnullを渡そうとしてエラーが出てしまいます。
したがってkeyをoptional型で宣言する必要があります。
class _Post extends StatelessWidget { final String name; final String message; final String textReason; final Color colorPrimary; final Color colorPositive; final String textPositive; final Color colorNegative; final String textNegative; const _Post({ Key key, this.name, this.message, this.textReason, this.colorPrimary, this.colorPositive, this.textPositive, this.colorNegative, this.textNegative, }) : super(key: key);
〜以下省略〜
}
エラーの内容と簡単な解決方法は以下の記事にまとめてあるのでみてみてください。
【完成画面のスクリーンショット】
Flutterで以下のようなKeyを使ったコードを書いていた時、
const _Post({
Key key,
@required this.name,
}) : super(key: key);
keyの部分で以下のエラーコードが出てきた。
「The parameter 'key' can't have a value of 'null' because of its type, but the implicit default value is 'null'.」
日本語訳では
「パラメータ 'key' はその型のために 'null' という値を持つことができませんが、暗黙のデフォルト値は 'null' です。」
ということらしい。
nullを持つことができないためにエラーが出力されているので、パラメータ'key'においてnullを持つことができる状態にしてあげることで解決する。(違ってたらすみません)
そこで使用するのがoptional型というもの。
このoptional型とは
「通常の変数と異なり、空の値（値が無い）状態を保持することができる変数」
らしい。
そこでoptional型の宣言方法を調べると、"?"をつけるだけで良いらしい。
詳しい内容はこの記事を読むと良いかもしれない。↓
Flutter2のDart Null Safetyを既存のプロジェクトに導入する | ZUMA Lab
以上のことから、エラーコードを修正するには?をつけて宣言することで解決することができるということがわかった。
const _Post({
Key? key,
@required this.name,
}) : super(key: key);
【参考にしたサイト】
【プログラムの構造】
本プログラムは以下のように配置することでListViewを実装しています。
⇆ 
本プログラムは以下のように配置することでListViewを実装しています。
このプログラムは以下の記事の続きとして書いています。
TextButtonで、テキストを押すことで前のページに戻るようにしています。
class TodoListPage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
//appbarを表示
appBar: AppBar(
title: Text('リスト一覧'),
),
body: ListView(
children: <Widget>[
Card(
child: ListTile(
title: Text('a'),
),
),
Card(
child: ListTile(
title: Text('b'),
),
),
Card(
child: ListTile(
title: Text('c'),
),
),
Card(
child: ListTile(
title: Text('d'),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){
//'push'で新規画面に遷移
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
//遷移先の画面としてリスト追加画面を指定
return TodoAddPage();
}),
);
},
child: Icon(Icons.add),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context){
return MaterialApp(
//アプリ名
title: 'My Todo App',
theme: ThemeData(
//テーマカラー
primarySwatch: Colors.blue,
),
//リスト一覧画面を表示
home: TodoListPage(),
);
}
}
//リスト一覧画面用Widget
class TodoListPage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
//appbarを表示
appBar: AppBar(
title: Text('リスト一覧'),
),
body: ListView(
children: <Widget>[
Card(
child: ListTile(
title: Text('a'),
),
),
Card(
child: ListTile(
title: Text('b'),
),
),
Card(
child: ListTile(
title: Text('c'),
),
),
Card(
child: ListTile(
title: Text('d'),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){
//'push'で新規画面に遷移
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
//遷移先の画面としてリスト追加画面を指定
return TodoAddPage();
}),
);
},
child: Icon(Icons.add),
),
);
}
}
//リスト追加画面用Widget
class TodoAddPage extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Center(
child: TextButton(
//ボタンを押した時の処理
onPressed: (){
//'pop'で前のボタンまで戻る
Navigator.of(context).pop();
},
child: Text('リスト追加画面（クリックで戻る）'),
),
),
);
}
}
以上がListViewの使い方になります。
この記事のプログラムは以下のサイトを参考にしています。
