[Flutter] Stack

Stack : 화면의 크기 확인, 패딩값, 텍스트 사이즈 등의 여러가지 시스템정보를 담고있음.

---

 

---

main.dart

 

import 'package:flutter/material.dart';       
        
void main() {       
  runApp(MyApp());        
}       
        
class MyApp extends StatelessWidget {       
  // This widget is the root of your application.       
  @override       
  Widget build(BuildContext context) {        
    return MaterialApp(       
      title: 'Flutter Demo',        
      theme: ThemeData(       
        primarySwatch: Colors.blue,       
        visualDensity: VisualDensity.adaptivePlatformDensity,       
        appBarTheme: AppBarTheme(
          color: Colors.deepOrange
        )
      ),        
      home: HomePage(),       
    );        
  }       
}       

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MINOKUMA - FLUTTER'),
      ),
      body: Stack(
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 80,
            height: 80,
            color: Colors.green,
          ),
          Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          )
        ],
      )
    );
  }
}

 

 

한 영역에 100 x 100 사이즈의 컨테이너가 배치되고, 

그 다음 80 x 80 사이즈의 컨테이너가 배치되고,

그 다음 60 x 60 사이즈의 컨테이너가 배치