[Flutter] 25. Stack, Positioned, Align, Expanded 위젯

[Flutter] 25. Stack, Positioned, Align, Expanded 위젯

 

1. Stack 위젯

• Row 위젯은 내부 위젯을 수평으로 나열하는 위젯이다.
• Column 위젯은 내부 위젯을 수직으로 나열하는 위젯이다.
• Stack위젯은 내부 위젯을 겹쳐서 나열하는 위젯이다.

 

 

2. Positioned 위젯과 Align 위젯

• 자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯이다.
• 특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만, Positioned 위젯은 Stack 위젯 내부에서만 사용할 수 있지만 Align위젯은 개별적으로도 사용 가능하다.
• Align 위젯에서 자식 위젯의 위치는 alignment 속성으로 설정할 수 있다.

 

 

3. Expanded 위젯

• 위젯 크기를 수치로 설정하지 않고, 비율로 설정할 때 사용하는 위젯
• 화면 사이즈가 다양하기 때문에, 수치로 위젯 크기를 설정할 수 있을 경우 여러 화면 사이즈 대응이 어려울 수 있다.
• 따라서, 비율로 위젯 크기를 설정하는 방법에 대해 알아둘 필요가 있다.
• Expanded 위젯의 flex 속성은 각 자식 위젯이 다른 자식 위젯과 비교해ㅡ 차지해야 하는 공간의 양을 지정하는 데 사용된다.

 

---

*시나리오 코드

 

(1) 시나리오 코드1

*자식 위젯이 생기면 위젯의 크기가 작아진다.

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: Container(
          color:Colors.deepPurpleAccent,
          child: Text('반가워')
        )
      ),
    );
  }
}

 

 

(2) 시나리오 코드2 - 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.pinkAccent
              )
            ),
            Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    color: Colors.blueAccent
                )
            ),
            Container(
                width: 500,
                height: 500,
                decoration: BoxDecoration(
                    color: Colors.yellow
                )
            ),
          ]
        )
      ),
    );
  }
}

 

 

(3) 시나리오 코드3 - Positioned 위젯

** Stack 위젯 내부에서 Positioned 위젯을 사용할 수 있다.

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.pinkAccent
              )
            ),
            Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    color: Colors.blueAccent
                )
            ),
            Positioned(
                top: 30,
                left: 50,
                bottom: 5,
                child: Container(
                    width: 500,
                    height: 500,
                    decoration: BoxDecoration(
                        color: Colors.yellow
                    ))

            ),
          ]
        )
      ),
    );
  }
}

 

 

(4) 시나리오 코드4 - Aligned와 Positioned 위젯

*Aligned 위젯: 특정 위치에 위젯을 배치하기 위한 것.

-Positioned: Stack 위젯 내부에서만 사용 가능

-Aligned: 독립적으로도 사용 가능

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Align Widget Example',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        body: Center(
          child: Container(
            // color: Colors.blue,  주의 !
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.all(
                Radius.circular(30.0),
              ),
            ),
            child: Align(
              //alignment: Alignment.bottomCenter ,
              alignment: Alignment(0.5,0.5),
              child: Text('Hello World'),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

(5) 시나리오 코드5 - Expanded 위젯

*Expanded 위젯

-Center 위젯은 해당 위젯의 크기만큼 (꽉 채울 만큼) 늘어남

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Expanded Widget Example',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            children: [
              Expanded(
                flex:2,
                child: Container(
                    color: Colors.red,
                    child: Center(child: Text("First Item"))
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                    color: Colors.orange,
                    child: Center(child: Text("Second Item"))
                ),
              ),
            ],
          )

        ),
      ),
    );
  }
}