[Flutter] Stack

Stack 말그대로 Container를 지속적으로 쌓아주는다는 것이다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(width: 500, height: 500, color: Colors.red,),
        Container(width: 400, height: 400, color: Colors.blue,),
        Container(width: 300, height: 300, color: Colors.green,),
        // 기본적으로 마지막에 넣은 순서대로 위로 배치하게된다
        Align(
            alignment: Alignment.bottomRight, // alignment라는 함수로 이동을 자유자재로 바꿀수 있다.
            child: Container(width: 200, height: 200, color: Colors.yellow,)),
      ],
    );
  }
}

 

주의사항 !

만약에 전부 Stack에 있는 Container 들을 모두 가운데에 넣고싶다면은 

밑에 처럼 Stack에다가 전부 Alignment Center를 하면 안된다

각각 모든 Container 마다 지정해야함

잘못된 예시

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Stack(
        children: [
          Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(150),
            ),
          ),
          Container(
            width: 280,
            height: 280,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(140),
            ),
          ),
          Text(
            'Click Me',
            style: TextStyle(color: Colors.black, fontSize: 35),
          )
        ],
      ),
    );
  }
}

잘된 예시

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(150),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 280,
            height: 280,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(140),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Text(
            'Click Me',
            style: TextStyle(color: Colors.black, fontSize: 35),
          ),
        )
      ],
    );
  }
}