音楽プレーヤー：アルバムアート

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 26/30。

セクション全体を使ってみましょう。次の5つのレッスンでは、音楽アプリの「再生中」画面を作成します。バッジ付きのアルバムアート、曲名とアーティスト名、再生位置スライダー、再生コントロール、そしてダークモードです。

音楽プレーヤーはレイアウトを試すのに最適です。すべての要素をスマートフォンの画面に収め、コントロールの幅を均等にし、アートの上にラベルを重ねる必要があります。

MyAppはすでにStatefulWidgetです。スライダー、再生ボタン、ダークモードで状態が必要になるためです。今のところ、Stateには何も保持されていません。

まずはアートから始めましょう。Stackを使うと画像の上にバッジを重ねられ、Positionedを使うとバッジを隅に配置できます。

チャレンジ

簡単

アルバムアートをStackに配置し、その上に右上隅から上と右にそれぞれ12ピクセル離してHDバッジを配置します。

バッジは、パディングにEdgeInsets.symmetric(horizontal: 8, vertical: 4)を指定し、角を8にしたColors.black54のBoxDecorationを持つContainerです
その子要素は白色で太字のHDです

自分で試してみよう

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Now Playing')),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: [
              Container(
                width: double.infinity,
                height: 300,
                decoration: BoxDecoration(
                  color: Colors.deepPurple,
                  borderRadius: BorderRadius.circular(24),
                ),
                child: const Center(
                  child: Icon(Icons.album, size: 120, color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}