新規ファイル作成

pagesディレクトリを作成する

pagesの中にprofile_page.dartを作成

スクリーンショット 2025-06-02 9.33.30.png

stfと打ついくつか候補が出てくる

一番上のFlutter Stateful Widgetを選択するとstatefulWidgetの雛形を作成できる

スクリーンショット 2025-06-02 9.18.28.png

スクリーンショット 2025-06-02 9.18.54.png

「MyWidget」の部分を上記コードの通り「ProfilePage」に書き換える

Placeholderをscaffoldに書き換えてそこにUIを作成していきます

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

main.dart書き換え

import 'package:flutter/material.dart';
import 'pages/profile_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ProfilePage(),
    );
  }
}

main.dartを↑のように書き換え、起動時にプロフィールページが表示されるようにする

アイコン画像を表示させる

Flutterで画像を表示する方法【まとめ】 - Qiita