Stack & Positioned

1.Stack

 

스택 위젯은 화면에 레이어를 만든것처럼 띄워주는 위젯이다

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          children: [
            const CircleAvatar(radius: 50, child: Icon(Icons.person, size: 40)),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.all(7),
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                child: const Icon(Icons.camera_enhance, size: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Stack을 사용하면 children영역을 층층히 쌓이게해서 표현할수있다.

 

2.  Positioned

포지션은 스텍에서 사용할 수 있는 위젯이다.

부모(스텍)의 위치를 기본적으로 가지고 있고 그 안에서 다른 위젯이나 요소를 띄울때 사용한다

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
          //fit: StackFit.expand,//크기설정 옵션 fit을 주로 사용한다
          children: [
            const CircleAvatar(radius: 50, child: Icon(Icons.person, size: 40)),
            Positioned(
              //스텍에 사용되는 위젯, 배치관련 위젯
              bottom: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.all(7),
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
                child: const Icon(Icons.camera_enhance, size: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}