Flutterでマイページのデザインサンプルコード

以下はFlutterで実装したマイページのデザインサンプルコードです。

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: EdgeInsets.only(top: 40.0),
            child: CircleAvatar(
              radius: 50.0,
              backgroundImage: NetworkImage(
                  "https://images.unsplash.com/photo-1563227264-6ca165a6c942"),
            ),
          ),
          SizedBox(height: 20.0),
          Text(
            "John Doe",
            style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10.0),
          Text(
            "Software Developer",
            style: TextStyle(fontSize: 16.0),
          ),
          SizedBox(height: 30.0),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 30.0),
            child: Column(
              children: [
                buildInfoItem(Icons.email, "johndoe@example.com"),
                SizedBox(height: 20.0),
                buildInfoItem(Icons.phone, "+1234567890"),
                SizedBox(height: 20.0),
                buildInfoItem(Icons.location_on, "San Francisco, CA"),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget buildInfoItem(IconData iconData, String info) {
    return Row(
      children: [
        Icon(
          iconData,
          color: Colors.grey[700],
        ),
        SizedBox(width: 10.0),
        Text(
          info,
          style: TextStyle(fontSize: 16.0),
        ),
      ],
    );
  }
}

このコードでは、CircleAvatarを使ってユーザーのアイコンを表示し、名前や職業などの情報をテキストで表示しています。また、InfoItemというウィジェットを定義して、情報を表示する際に使っています。InfoItemはRowを使ってアイコンと情報を横並びに表示しています。このように、Flutterではウィジェットを組み合わせて、自由自在なUIを作ることができます。