Flutterプログラミングで、しずかちゃんのパンツ色変えてみた。[ランダムカラー変更][Random]
今回はランダムカラー変更やで！！
って事で、構想はこれ
- 背景色をボタンを押す事でランダムに変更。
- パンツの部分だけを透過させた、しずかちゃん画像を用意。
- その画像を背景の上に重ねる。
さぁ！！いってみよー！！
ランダムに変更するには下記のdart:mathってのをインポートせなあかんらしいわ。
import 'dart:math';
ほんで、これ。
// 初期パンツカラー
Color colorCode = Colors.white;
//ランダムカラー設定ここから
final Random random = Random();pantuRandomColor(){
Color pantuColor = Color.fromARGB(
random.nextInt(256),
random.nextInt(256),
random.nextInt(256),
random.nextInt(256),
) ;setState(() {
colorCode = pantuColor ;
});
}
//ランダムカラー設定ここまで
で、のび太の欲望ボタンを配置したら！！
RaisedButton(
onPressed: () => pantuRandomColor(),
onPressed: () => pantuRandomColor(),
ボタン押されたらpantuRandomColorをよむって事やで。
出来たーーーーー！！！
欲望の執念は必ず形になるんやで！！
コード貼り付けて動かすんやで！！
Flutterでリストタップで画像表示アニメーションするんやで！[Hero animations]
できひんやんけーーー！！！
というのは、
[タブ→リスト→画像表示]この画面遷移、、要素が絡まると指定要素が重なって、、これがむずい。
前回はタブからリスト表示できたんやけど、リストタップからの画像表示で苦戦。
今回特にこだわったDartPadのみで表示できるように作りたかったんやけど、
画面遷移はどうやら別ファイルを読み込む形が主流らしいな。
けど、画像一枚表示する為に別ファイル一枚作るのはどうかと思って。
試行錯誤してみたけど、、結論から言うと。
できませんでした！！！
m(_ _)m
って事でいつまでも出来ないことに縛られても、もったいないやん！！
（今後の課題やな）
せめてリストタップで画像表示をメインファイルのみで表示できるようにするんやで！！
うまくいかず凹んでた私の前に現れたのは
[Hero animations] !!!
まさに私のヒーローだった。
これは表示するだけでなくアニメーションも付けてくれるんやで！
ListTile(
leading: GestureDetector(
child: Hero(
tag: 'Kokyu-image',
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200521/20200521191250.png",
),
)
),
),
onTap: () => Navigator.push(
context,PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) => Kata2())),
title: Text('弐ノ型：水車',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: Text('にのかた：みずぐるま'),
trailing: Icon(Icons.keyboard_arrow_right),
),
リストタイルで囲ってleading: GestureDetectorの中にヒーローはおるんやで！！
リストに画像アイコンを追加してタグ(Tag)で表示画面と関連付けるんやで！
表示画面はこれ
class Kata2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("弐ノ型：水車"),
),
body: Hero(
tag: "Kokyu-image",
child: Container(
width: double.infinity,
alignment: Alignment.topCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200521/20200521224835.gif",
),
fit: BoxFit.cover)),
),
));
}
}
これもtagを同じ名前にするんやで！
サンプルは弐ノ型だけ実装してみたんやで。
出来た！！！！！
せ、せめて、、お名前を！！！
名乗るほどの者じゃ〜ございません。
ありがとう、、ヒーロー
完。
DartPadで貼り付けて触ってみるんやで！！
Flutterでタブメニューからリストを表示するんやで。[TabBar][TabBarView][ListView][ListTile]
Flutterのタブとリストの各表示方法はネット上にも、まあまあ情報がある。
だ〜がしかし、、
タブメニュー押したら、リストを表示したいやん。
で、ググっても
情報ないやーーーーーーーーん。
こんなよく使いそうな事ないんかーーい、、
って事で鬼滅の刃の技(呼吸)一覧を使ってサンプル解説します。
タブの中にリスト入れたい！！！
そんな時はこれやで！！！
[TabBar]
[TabBarView]
これでタブを表示して
appBar: AppBar(
title: const Text('鬼滅の刃 呼吸一覧'),
bottom: TabBar(
tabs: [
Tab(text: '水の呼吸'),
Tab(text: '雷の呼吸'),
Tab(text: '獣の呼吸'),
]
),
),
[ListView]
これでタブとリストを関連付けるんやで。
body: TabBarView(
children: [
ListView(
children: mizu,
),
ListView(
children: kaminari,
),
ListView(
children: kedamono,
),
],
),
[List] と[ListTile]
で並べると。
List<Widget> mizu = <Widget>[
ListTile(
title: Text('壱ノ型：水面切り',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: Text('いちのかた：みなもぎり'),
trailing: Icon(Icons.keyboard_arrow_right),
leading: Icon(
Icons.invert_colors,
color: Colors.blue[500],
),
),ListTile(
title: Text('弐ノ型：水車',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: Text('にのかた：みずぐるま'),
trailing: Icon(Icons.keyboard_arrow_right),
leading: Icon(
Icons.invert_colors,
color: Colors.blue[500],
),
),]
よっしゃーーー！！
タブの数を増やしたい時には
１２行目のこれ
length: 3,
ここも変更してな。
List枠も同じ数ちゃんとないとエラーになるから注意やで！
んじゃ
次はリスト項目押したら
画像表示するようにしてみるんやで！！
乞うご期待！
コード貼り付けて動かすんやで！！
Flutterで、鬼滅の刃。ねずこが咥えている物をボタンで変更するんやで。[BottomNavigationBar]
ねずこの竹、違う物にしたい！！
君もそう思った事があるやろ。
そんな時に便利なんは
BottomNavigationBar やで！！
早速やけど見てみて！こんな感じやで！
って事で今回はまずイラスト３枚用意。
背景をねずこにして竹だけを変更してもええねんけど、
今回は表情も変えたかったから、ボタンを押す事で画像変更する感じやで。
画像コードはこんな感じ
Listでimageを並べてるんやで。
class _MyNezukoState extends State<MyNezuko> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Image(
image: NetworkImage('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200522/20200522231657.png'),
),
Image(
image: NetworkImage('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200523/20200523152357.png'),
),
Image(
image: NetworkImage('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200523/20200523150355.png'),
),
];
ほんで、bottomNavigationBar
アイコンののサイズとか色とか決めるんやで。
これだけで画像変更出来るフラッターってすごいな。
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
color: Colors.pink,
size: 44.0,
),
title: Text('竹'),
),
BottomNavigationBarItem(
icon: Icon(Icons.home,
color: Colors.pink,
size: 44.0,),
title: Text('ステイホーム'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mood_bad,
color: Colors.pink,
size: 44.0,),
title: Text('！！'),
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
これからはお父さんが日曜大工するようにアプリ作る時代やな。
次は何作ろかな。
乞うご期待！
コード貼り付けて動かすんやで！！
Flutterプログラミングで鬼滅の刃[水の呼吸 弐ノ型]してみた。AnimatedBuilder
鬼滅の刃！！
水の呼吸 弐ノ型 水車！！
作ってみるんやで！！
って事でイラスト書いたんや。
背景が透過PNGで保存するんやで。
透過PNGって何？って人は、背景がスケてるイラスト画像の事やで。
今回は水車の感じだけを回したいから、
水車と炭治郎を別々で書いたんやで。
カッコええな〜炭治郎
ほんで今回使うのは
AnimatedBuilder や！！
これは画像とかも回したり色々出来るから便利かも。
サンプルはgifアニメ画像やから、ほんまはもっとスムーズやで！
一番したのコードの数値あげたらもっと早く回せるわ。
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _controller.value * 8.0 * math.pi,
child: child,
);
},
ドヤ！！ええ感じちゃうん？
ちなみに背景はグラデーションで指定してみたんやで。
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topLeft,
end: FractionalOffset.bottomRight,
colors: [
const Color(0xffe4a972). withOpacity(0.6),
const Color(0xff9941d8).withOpacity(0.6),
],
stops: const [
0.0,
1.0,
],
以下省略
次は何の呼吸の何の型しよかな。。
乞うご期待！
コード貼り付けて動かすんやで！！
Flutterでクレヨンしんちゃんの愛情表現を実装。[AnimatedCrossFade]
今回はクレヨンしんちゃんのお尻から学ぶんやで！！
画像を2枚使ってアニメーションさせるんや！
てことで2枚書いたんや。ええお尻やな。
これをクロスフェードさせるんやで！！
そんな時はこれや！！
AnimatedCrossFade！！！
けど、ほんまは３枚の画像を順番に表示したかったんやけど、、
できんかったわ。
２枚以上の場合はこのクラスは使わん方がええんかもね。うむうむ
サンプルをgif動画で動き見せれるようにしたんやで。
ドヤ！
あ〜〜〜癒されるわ。。。
material.dartの他にdart:asyncってのをインポートしてんねんな。
import 'package:flutter/material.dart';
import 'dart:async';
非同期処理って言って一つの動作を実行してる時に他の動作も出来る様にする為に必要らしいわ。
なるほどな、ちょっと何言ってるかわからん。
ま、おいといて。
タイマーで秒決めて(seconds: 1)
void initState() {
_crossFadeTimer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
if (_crossFadeState == CrossFadeState.showFirst) {
_crossFadeState = CrossFadeState.showSecond;
} else {
_crossFadeState = CrossFadeState.showFirst;
}
});
});
super.initState();
}
もし(if) [showFirst]やったら次は[showSecond]表示してなって事で、
その他(else)やったら[showFirst]に戻ってって事やな。
で [showFirst]と[showSecond]の画像を決めてるのがここ
Widget build(BuildContext context) {
final image0 = Image.network(
'https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200518/20200518193201.png',
width: 180.0,
height: 180.0,
);
final image1 = Image.network(
'https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200518/20200518193208.png',
width: 180.0,
height: 180.0,
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: AnimatedCrossFade(
firstChild: image0,
secondChild: image1,
duration: Duration(seconds: 1),
crossFadeState: _crossFadeState,
),),
);
}
とりあえず画像を読み込んで、bodyの中で決めてるんやで。
今回は２枚の画像を入れ替えてアニメーションしたけど
次の課題は３つの画像で変化させる事やな、、
これが出来る方法を
知りたい。
尻だけに！！
コード貼り付けて動かすんやで！！
Flutterでうんこ流せたんやで！！[完成]
突然やけど、
StatelessWidgetは静的 StatefulWidgetは動的
って事らしいから、
ボタンでうんこを流す為に、前回までのコードもいくつか変更するんやで！
まず、うんこ画像
//うんこ画像コード
class MyUnko extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container( alignment: Alignment(0.0, 0.2), child: Image.network('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200514/20200514210228.png'),
);
}
}
StatelessWidget使ってるや〜ん、、
StatelessWidgetはStatefulWidgetに変えてみるやで。
既存のコードを変えただけやと上手くいかんかったから。
// ここから
class MyToto extends StatefulWidget {
@override
_MyToto createState() => _MyToto();
}
// ここまで
クラス_MyTotoはステートフル（StatefulWidget）やぞって教えてあげて
クリエイトステート(createState)でステート(State)返すんやぞ！
って感じにするんやで。
※ここは妄想も入ってるから、とりあえず今はスルーしてや。
要するにクラスの_MyTotoの中に全部放り込んだんやで。
class _MyToto extends State<MyToto>
// これは下で説明
with SingleTickerProviderStateMixin {// ここまで
- SingleTickerProviderStateMixin:
一つのクラスで使うAnimationControllerが1つのとき - TickerProviderStateMixin:
一つのクラスで使うAnimationControllerが2つ以上のとき
で、画像のコード箇所はこれ
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
// アニメーションの状態をみて描画処理を実行
width: animation.value,
height: animation.value,
child: Stack(
children: <Widget>[
Align(
child: Image.network('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200514/20200514210228.png'),
),
]
),
),
],
),
で、最後にどーーーーん！
//アニメーションの操作（メソッド）
Animation<double> animation;
AnimationController controller;
final tween = Tween(begin: 300.0, end: 0.0);// Stateを初期化する
initState() {
super.initState();// アニメーションの時間
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
// 状態が書き換わると描画を更新
animation = tween.animate(controller)
..addListener(() {
setState(() {});
});
}// アニメーションの状態を見て、再生か逆再生の判断
nagasu() {
switch (animation.status) {
case AnimationStatus.dismissed:
case AnimationStatus.reverse:
controller.forward();
break;
case AnimationStatus.completed:
case AnimationStatus.forward:
controller.reverse();
break;
}
}
うんこ流れたやーーーーーん！！涙
今回はさすがにスムーズにはいかず、参考にさせていただいたWeb備忘録さまのおかげでなんとか半ば強引なとこもあるけど完成まで持ち込めたんやで。ありがとうございます！m(_ _)m
まだ、自分でもよくわからん点、上手く説明できてない箇所などあるから後日また詳しく分析してみようと思うんやで。
とにかく完成してよかったわ。。
うんこを流そう！！[完成] m(_ _)m
Flutterだけにホットシタードやわ。
あ、ホットリロードやわ。
ん？ 寒いって？
ま、水に流してや。
うんこだけに！！！！！
DartPadにコード貼り付けて見てみるんやで！
,){kind=link}
,){kind=link}
,){kind=link}
,){kind=link}