毎週日曜日に行なっているYouTubeライブで、CustomPainterを用いて星を描画し、さらに途中まで色を塗る方法を紹介したので、そのコードを載せておきます。

評価機能で使えるような、画像の途中までは普通に表示して、途中からは暗いエフェクトを付けて表示するようなクラスを作成したので、みなさまにもコピペで使ってもらえるような形にして提供します。 使い方評価のときに並べて使う正方形の画像を用意して、assetかURLを使用して表示します。 Rating.network( 'https://drive.google.com/uc?export=view&id=1tqaSZy7JiSyCxmMpOWHVUHF-MTVHjBYQ',

はじめにモバイルアプリ開発での広告表示（AdMob）の方法は、以前の記事で解説しましたが、Flutter WEB開発での広告表示についても解説したいと思います。 ↓AdMobの解説 はじめて広告表示するときは、調べても良くわからず手こずったので、みなさんがそうならないようにできる限り丁寧に解説します。 準備・Flutter WEBアプリを公開する ・広告の審査を通す WEBの広告を使うには基本的に審査を通す必要があります。 AdSenseの審査が厳しめですが、比較的緩

はじめにハッチアウトスクールの公式WEBをFlutter for WEBで開発しているのですが、運営しているFlutterプログラミングスクールの月額をWEB内でStripe決済できるようにしたので、その方法を紹介します。 今回難しいと思われる点は2つです。 Flutterでのモバイルアプリ開発でStripe決済を導入する場合はWebViewを使用しますが、Flutter for WEBではWebViewが使えない、というよりもともとがWebViewなのでどのように記述す

はじめにこちらの記事は『【Flutter】アプリを多言語化する　①〜パッケージの準備〜』の続きとなっております。まだご覧になっていない方はそちらからお願いいたします。 完成イメージ フォルダの作成libディレクトリにl10nフォルダを作成してください Strings.dartを作成、編集するimport 'dart:async';import 'package:flutter/widgets.dart';import 'package:intl/intl.dart';i

はじめに〇✕ゲームの開発を題材に、Flutterでのモバイルアプリ開発の基礎である、Widgetや開発言語（Dart）の学習ができるように、できる限り丁寧に解説していきます。 完成形のコードはすべてコピペできるように用意しているので、特にプログラミング初心者はコピペで進めて、まずはプログラミング・アプリ開発がどういう手順で進むのかを体験しながら興味を持ってもらえば嬉しいです。 また、この記事の内容を動画で学びたい方は『Flutter Labo』のほうからご覧ください。 完

（2021年12月5日更新）この記事は2020年8月から公開していますが、2021年12月の最新版Flutterに合わせて、NullSafetyやLinterに対応したコードを更新しました。 すでにお買い上げの方は改めて購入することなく確認できますのでぜひご覧ください。 はじめにカレンダーに関するパッケージはたくさん存在しますが、それを使ってしまうとカスタマイズがしにくいのでコピペだけで使用できるカレンダーのコードを作成しました。 完成形手順1. pubspec.yaml

AdMobのバナー広告をアプリ内に表示することによって収益化を目指すために必要な準備、パッケージ、表示のためのコードを紹介していきます。 Flutter学習サイト『Flutterラボ』で動画コースとしても公開している内容ですので、動画で学びたい方はこちらからご覧ください。 前提条件・Googleアカウントを持っている ・AdMobへのログインが完了している ・Firebaseへのログインが完了している 完成形iOS・Android両プラットフォームでAdMobバナー広告

Flutterのパッケージを探すとカレンダーに関するものがたくさんありますが、それを使ってしまうとカスタマイズがしにくいのでコピペで使用できるグラフ作成のコードを紹介します。 完成形 手順1. pubspec.yaml を編集して、パッケージを取得 2. main.dart をコピペ コード pubspec.yaml を編集して、『intl』パッケージを取得します。 dependencies:flutter: sdk: fluttercupertino_icons:

アプリを再起動すると、前までの変数の情報はすべて元に戻ってしまいます。 そこでアプリ内の設定等、次にアプリを立ち上げたときも使いたい情報は、端末内に保存しておく必要があります。 完成形アプリを再起動しても、前までカウントしていた『5』という数字を端末に保存しておいて次回からはその続きからカウントできるようになっています。 手順1. パッケージを取得 2. コードをコピペ パッケージを取得pubspec.yaml を編集して、『shared_preferences』パッケ

Navigator.pushで画面遷移するときは、MaterialPageRouteを使うのが基本となっています。 ただ、それだと画面を上から出したり、左から出したりする動作を行うことができないので、新しいSlideRouteを自作して、どこから画面が出てくるかを決められるようにしたいと思います。 main.dart をコピペするだけで画面遷移を上下左右から自由自在に行うことができるコードの動作を確認することができます。 完成形 コピペ用コードmain.dart

通常のBottomNavigationBarでは、スクロールしたときに透過させることができません。 そこでスクロールしたアイテムをガラス透過させたようなボトムメニューを新しく作成してみたいと思います。 完成形 手順1. 画像をプロジェクトに入れる 2. コードをコピペ 画像をプロジェクトに入れる 画像をプロジェクト内に配置 pubspec.yaml に画像のパスを記述 コードをコピペ 以下のコードを main.dart をコピペ