Flutterでボタンの位置を変えてええ感じにするんやで。[FloatingActionButtonLocation ]
今回はボタンを真ん中にしたりええ感じにするんやで！
そんな時はこれや！！
FloatingActionButtonLocation！
フローティングアクションボタンロケーションや！
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
ボタンのコードの上に書くんやで。
floatingActionButton: FloatingActionButton
こんな感じな。
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
child: Text('流す',
style: TextStyle(fontSize: 20),
),
onPressed: () {},
),
[centerFloat] のとこは色々変えれるからみてみるんやで。
FloatingActionButtonLocation class
よし！真ん中なったわ。
なんか寂しいから、下にナビゲーションバーってのを付けてみるわ。
Flutterではナビゲーションバーに埋まるボタンが簡単にできるみたいやから
とりあえず使わん手はないやん。
bottomNavigationBar や！
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
color: Colors.blue,
child: Container(
height: 50,
),
),
この上のコードを
下のフローティングアクションボタンを表示してるコードの下に書くと、、
floatingActionButton: FloatingActionButton(
child: Text('流す',
style: TextStyle(fontSize: 20),
),
onPressed: () {},
),
なんか下に出てきたやろ。
これに流すボタンを埋め込めるんやで！
埋め込む方法は、フローテングアクションボタンのとこの
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
centerFloat
これを
centerDocked
に変えると、、
ええんちゃう〜〜〜〜ん！！
次はボタンを押すと
うんこが流れるようにするんやで！
乞うご期待！
Flutterでうんこを流す為のボタンをつけるんやで。[FloatingActionButton]
Flutterにはめちゃいい簡単に付けられるボタンがあるねん。
それは
FloatingActionButton や！
フローティングアクションボタン や！
かなり使えそうやから二回言っとくわ。
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
このコードを
home: Scaffold（ の中に書いたら右下にボタンが現れるんや。
上のコードはアイコンが [add] やから
こんな感じなるんやで。
ボタンの中に表示するアイコンもいろいろあるんやで。
下にリンク貼っとくから、みてや。
Icons class - material library - Dart API
けど今回はボタンに文字入れるんやで！
[流す]ってボタン作りたいや〜ん。
アイコンを文字にするにはこれ！！
child: Text('流す', style: TextStyle(fontSize: 20), ),
style: TextStyle(fontSize: 20のとこで、文字の大きさ決めてるんやで。
下のアイコン表示コードを書き換えるんやで。
child: Icon(Icons.add),
これでどうや！！ドン！！！
よっしゃーーー！！
じゃあ次は、ボタンの位置とかいい感じにしていくんやで！！
乞うご期待！
Flutter[DartPad]のサンプルのいらないコードを一旦整理します。
前回までの流れ[うんこ編]
-
テキストのうんこを画像に変える。
-
背景をトイレにする。
-
うんこの画像サイズを変更
-
うんこ画像の位置を微調整
と、こんな感やで。
Flutter[DartPad]サンプルにコードを追加する形で
進めてきたから、一旦この辺で要らないコードを削除して
スッキリさせます！
まず３行目のこれ！
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
これは何してるかと言うと、darkBlueの色を決めてるんやで。
要素 (透明度、赤、緑、青)
こんな感じかな。
値は0~255内で指定できるんやで。
例えば、ピンクにしたかったら
final Color darkBlue = Color.fromARGB(255, 255, 192, 203)
この場合名前のdarkBlueは自分で決めれるからpinkにした方がええな。
トイレの背景の後ろにある色やから、確認する場合はトイレ画像が表示されてるコード２１行目から２７行目は一旦削除するんやで。
で、１４行目のこれで表示してるんやで。
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
な、ピンクなったやろ。
と言うわけで、うんこ流すのには今の所必要ない背景カラーは削除するで。
４２行目もうんこ画像を縮小する為に追加してみたけど上手くいかなかったから消すんやで。
constraints: BoxConstraints.expand(),
あと！
17行目のこれ
debugShowCheckedModeBanner: false,
これを消すと。画面右上にDEBUGって出るから消しません。
ま、開発中みたいな感じなんかな。
で、整理したんが下のこれ！！
あ〜〜スッキリやわ。
って事で引き続き気合入れて
うんこ流していくんやで！！！
乞うご期待！
Flutterでうんこ画像の位置を少し下にしてみるんやで。
前回はうんこを小さくしたけど、
うんこが便器の内側に、こびりついてるから
もう少し下に移動させたいんやで。
MyUnkoのコンテナの中に位置を指定できるコード書いてみた。
ドヤ！！
ええや〜ん！
38行目にこれ追加したで。
alignment: Alignment(0.0, 0.2),
カッコ内の数値の意味は
(横の位置, 縦の位置)
-1から1の範囲で指定するみたいやで。
今回は縦の位置を少し下にしたから
プラス0.2下にずらしたって事やわ。
[alignment: Alignment] は
数値でも変えれるし下の様にtopLeftみたいな文字でも指定できるみたいやわ。
alignment: Alignment.topLeft,
- topLeft 左上
- topCenter 中央上
- topRight 右上
- centerLeft 中央左
- center 中央
- centerRight 中央右
- bottomLeft 左下
- bottomCenter 中央下
- bottomRight 右下
次回は、、
うんこを流すんや！！！
ここからが、難題やな。。
乞うご期待！
とりあえず下のコードをdartpadに貼り付けて触りまくるんやで！https://dartpad.dartlang.org/flutter
Flutterで背景画像の上にのせた画像サイズを変更するんやで。
前回は背景を表示できたけど、上に乗ってるうんこが大きすぎた。
たまに出るびっくりすぎるくらいの大きなうんこはあるけど、
ここでは小さくしたいんやで。
って事で、
元の大きなサイズの画像を縮小して表示するんやでっ！！
しかし、、、
いろいろ試しても、、、
出来ひん！！、、なんでや、、
サイズ指定をするもの、、反映されない、
クラスMyUnkoを下記の様にサイズ指定すると
親要素であるMyTotoも小さくなってしまう、、
constraints: BoxConstraints.expand(height: 70.0, width: 70.0),
困ったな、、
しか〜〜〜〜〜〜〜し！！
焦る事はない。
こんなトラブルは何かを作る上ではあたりまえの様にあるんや！！
大切な事は前に進む事なんやで！！！！
その問題を解決するより重要なんは、他の方法を考えることやと思うんやで！
って事で、
元の画像を小さく作り直しました。汗 ハ ハ ハハハ。
ええやん。可愛いやん。
で、画像アドレスを小さいうんこに変更して。。
ドヤ！！！！！！！！ドン！！！
よしゃ〜〜〜〜〜！！！
うんこが便器の内側に張りついとるやないか〜〜〜〜い！！
もう少し下がええな、、、、
次回はうんこを少し下にずらします。
乞うご期待！！
Flutterで背景画像を表示してみるんやで。
前回は、うんこ画像を表示できた。
うんこを表示したら、便器に流したくなった。
人間だもの
って事で、次は背景をトイレにするんやで。
イラスト書いたで。
body: Containerの中に
下記: 19行目から24行目を追加したで。
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'画像アドレス'),
),
),
見てみよう！！
※PCで見てや、スマホなら横向き又はDartPad全画面表示で！コードコピペでみてみるんや！
背景小さいや〜〜〜ん！！
なんでやねん。
ほんなら、これでどうや！！
下記: 23行目から25行目に追加したで。
fit: BoxFit.cover,
BoxFitにはいろんな種類があるみたいやわ。
- BoxFit.contain 縦横比率を保って全画像表示するから余白がでるかもね。
- BoxFit.fill 縦横比率を保たず画面全表示で画像が伸びるかもね。
- BoxFit.cover 画面全表示での拡大縮小。余白が出ない。
- BoxFit.fitHeight 画面の縦を最大表示。縦横比率拡大縮小。
- BoxFit.fitWidth 画面の横を最大表示。縦横比率拡大縮小。
- BoxFit.none 拡大縮小しない。中央表示。
- BoxFit.scaleDown 縮小して全表示。
って感じで、今の所使ってみたら、３のcoverが一番しっくりきたので
これ使ったんやで！！
背景はマシになったけど、、、
うんこデカいな！！
次はうんこをそれなりの大きさにします。
乞うご期待！！
プログラミング息抜き Flutterってこんな感じやろ？
なかなかええんちゃうん？
