【Flutter】バレンタインチョコルーレットを作ったよ💝
はじめに
初めまして。Flutter初学者のminnです。
先日のバレンタインで、バレンタインチョコルーレットを作ってみました。
簡単なルーレットですが、思いのほかいろんな人に楽しんでもらえたので紹介します。
手軽にアプリを作りたい方はぜひ参考にしてください〜
↓ 遊んでみてね💝
目次
- 使った技術・パッケージ
- 実装
- FirebaseHostingにデプロイ（Webに公開）
1. 使った技術・パッケージ
- Flutter Web
- roulette (ルーレットのぐるぐる部分を作ってくれるパッケージ）
https://pub.dev/packages/roulette - Firebase Hosting
2. 実装
・ パッケージをインストール
pubspec.yaml ファイルに roulette を追加し、flutter pub getします
dependencies:
roulette: <任意のバージョン>
※最近できたパッケージみたいです
・ ページを２つ作る
| １ページ目 | ２ページ目 |
|---|---|
| ルーレットとボタンがある画面 | ランダムに結果を表示する画面 |
|
 |
【１ページ目】
①StatefulWidget に SingleTickerProviderStateMixin を適用（with)
SingleTickerProviderStateMixin をクラス定義に追加します。
これは、オフスクリーン時に不要なアニメーションでリソースを消費しないようにするための設定らしいです。
class _RoulettePageState extends State<RoulettePage>
with SingleTickerProviderStateMixin {
②ルーレットのぐるぐる回る部分を作る
表示させたい項目を入れたコントローラを作成します。
_controller = RouletteController(
group: RouletteGroup([
//ここに項目を追加。 「no.Text」を「text」にするとテキストを表示できるよ。
RouletteUnit.noText(color: Colors.色),
RouletteUnit.noText(color: Colors.色),
RouletteUnit.noText(color: Colors.色),
RouletteUnit.noText(color: Colors.色),
]),
vsync: this)
);
コントローラを作成したら、ルーレットのウィジェットを作成します。
Roulette(
controller: _controller,
style: const RouletteStyle(
centerStickerColor: Colors.brown, //中心の丸の色
dividerThickness: 4, //区切りの厚さ
),
),
これで、ルーレット自体はできました。
③ルーレットを回すボタンを作る
ルーレットを回した後に結果ページへ遷移するボタンを作成します。
ElevatedButton(
onPressed: () async {
//コントローラでルーレットを回す
await _controller.rollTo(2,
clockwise: true, //時計回り
offset: Random().nextDouble(), //最終位置
);
//結果ページへ画面遷移
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const ResultPage(),
));
} ,
child: const Text("受け取ってね！",),
),
【2ページ目】
①表示したいチョコの画像URLのリストを作る
List<String> imgURLs = [
'images/girichocoyade.png',
'images/honnmeiyade.png',
'images/taiyakiyade.png',
'images/tomochocoyade.png',
];
②Ramdom関数でランダムにリストの画像を表示させる
final ram = Random(DateTime.now().millisecondsSinceEpoch);
_imgURL = imgURLs[ram.nextInt(imgURLs.length)];
DataTime...は、Ramdom関数で生成される乱数の種を時間ごとに変えるために入れてます。
これをしないと、アプリを開くたびに乱数が同じ順番になります。
例えば 「2,1,1,3,2,4」という乱数順が、アプリを開き直すとまた「2,1,1,3,2,4」になる。
（これで最初友達に見せても、みんなたい焼きになった）
Image.asset(_imgURL,
height: 300,
width: 300,),
画像を設置して完成！
・全体コード
3. FirebaseHostingにデプロイ（Webに公開）
Firebase HostingにデプロイしてWEBに公開します。
- 参考記事
さいごに
最後までご覧いただきありがとうございました。
Flutter初心者なので指摘などあればコメントください。
初めて自分のwebアプリを公開しましたが、楽しんでもらえて嬉しかったのでもっといろんなアプリを作りたいなと思いました( ◠‿◠ )♡
ちなみに、Flutter大学に所属しています。
質問zoomや週一勉強会、共同開発、交流会などサービスが充実してて、Flutterでのアプリ開発がさらに楽しくなります。また、コミュニティのみなさん優しい方ばかりで、最新の情報がいち早く入ってくるので学ぶことも多いです〜。気になってる方はぜひ！
YouTubeのvideoIDが不正です
参考
Discussion