🌐

Flutter Webでポートフォリオページ作ってみた

2021/09/12に公開

1. 作った理由

  • 自分のプログラミングのレベルを紹介するものが何もなかった(汗)から。
  • 既存のポートフォリオ作成サービスで作った方が綺麗に作れるだろうけど、せっかくflutterでウェブページが作れるので試してみたかった。

サイトのリンク:
https://nasubi-portfolio.web.app/#/

2. 主な使用技術

  • Flutter for Web
  • Firebase Hosting

3. 設計

Figmaでレイアウトをざっくり決めてからコード作成に入った。

見直してみると本当にざっくり〜。

4. 使用したライブラリ

url_launcher: ^6.0.10
:GitHubや技術記事のリンクへ移動できるようにするのに使用。

dots_indicator: ^2.0.0
:ページビューのインジケータとして使用。

firebase_core: ^1.6.0
:Firebase hostingでデプロイするのに使用。

5. このウェブアプリを作る上でのポイント

  • ネタ(紹介するコードや記事)が増えたときに、なるべく修正する箇所を少なくする。
     → リンクと画像のurlを記入するだけで投稿可能な形にできた!

  • デバイスレスポンシブにする
     → Safari / Chrom / iPhone12のシミュレータで確認したところ、うまく画面が切り替わってくれた。

つまづいた点

  • PageViewの描画範囲
     → PageViewを使う際に、あらかじめ描画範囲を指定しないとエラーが出る。
      以下のように、子にPageViewが含まれるColumnを作ってしまった場合、
    "A RenderFlex overflowed…"のエラーが出る。

    Column(
      children: [
          height: 550.0,
          width: 350.0,
          child: PageView.builder(
              controller:
                  PageController(initialPage: 0, viewportFraction: 0.9),
              itemCount: myAppList.length,
              itemBuilder: (BuildContext context, int index) {
                return myAppForPhone(
                    myAppList: myAppList,
                    deviceHeight: deviceHeight,
                    deviceWidth: deviceWidth,
                    index: index);
              }),
      ],
    ),
    

    PageViewをサイズ指定したContainerで囲うとうまくいった!

    Column(
      children: [
        Container(
          ///PageViewの描画範囲を決めておく(これがないとrenderErrorになる)
          height: 550.0,
          width: 350.0,
          child: PageView.builder(
              controller:
                  PageController(initialPage: 0, viewportFraction: 0.9),
              itemCount: myAppList.length,
              itemBuilder: (BuildContext context, int index) {
                return myAppForPhone(
                    myAppList: myAppList,
                    deviceHeight: deviceHeight,
                    deviceWidth: deviceWidth,
                    index: index);
              }),
        ),
      ],
    ),
    
  • リストの扱い
     → なるべく型を書くようにする。

感想

デザインとかはともかく(笑)flutterで自分のポートフォリオサイトのようなものが作れた。
今は他のリンクに飛ばす簡単なページにしたけれど、管理者ページを追加したりして使いやすいようにしていきたい。

Discussion