Flutter

[Flutter] Stack 위젯

미로910 2024. 11. 6. 12:12
  • Row 위젯은 내부 위젯을 수평으로 나열하는 위젯, Column 위젯은 내부 위젯을 수직으로 나열하는 위젯
  • Stack 위젯은 내부 위젯을 겹쳐서 나열하는 위젯
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp7());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          children: [
            Container(
              width: 400,
              height: 400,
              decoration: BoxDecoration(
                color: Colors.pink
              ),
            ),
            Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                  color: Colors.black
              ),
            ),
            Positioned(
              top: 50,
              left:  50,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                    color: Colors.yellow
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}