import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:StackSample(),
    );
  }
}
class StackSample extends StatefulWidget {
  @override
  _StackSampleState createState() => _StackSampleState();
}

class _StackSampleState extends State<StackSample> {
  final random = Random();

  double get randomValue => (random.nextDouble() * 2) - 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand, // これを設定すると画面いっぱいに画像が描画されます。
        children: [
          Container(
            color: Colors.black,
          ),
          // Image.network(
          //   'https://pbs.twimg.com/media/EXJpPggVcAIfDtH?format=jpg&name=4096x4096',
          //   fit: BoxFit.cover, // 縦横比を変えず両端を切り落とす形で表示してくれる。
          // ),
          Align(
            // 縦横 -1 ~ 1 の範囲で自由に表示場所を指定できる
            // Alignment(横軸で表示させたい場所を -1 ~ 1 の範囲で指定 , 縦軸で表示させたい場所を -1 ~ 1 の範囲で指定)
            // -1 ~ 1 を越えた値を指定するとstackの描画範囲を超えて表示させることも可能(今回は扱わない)
            alignment: const Alignment(-0.8, 0.4),
            child: Column(
              // Columnは縦いっぱいに広がろうとしてしまうので、minを与えないとレイアウトが崩れます。
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  'Align',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 40,
                    color: Colors.white,
                  ),
                ),
                Text(
                  '自由にWidgetを配置する',
                  style: TextStyle(
                    // fontWeight: FontWeight.bold,
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          for (var i = 0; i < 100; i++)
            Align(
              alignment: Alignment(randomValue,randomValue),
              child: Text(
              '⭐︎',
              style: TextStyle( 
                 color: Colors.amber,          
                 fontSize: random.nextInt(30) * 1.0,
               ),
              ),
            ),
        ],
      ),
    );
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.