플러터 위젯 - 예시

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());   // 앱을 구동
}


// stless + tab 키 누르기
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {  // 여기 위에 4줄은 형식적인 것들임

    // 여기부터가 앱 디자인하는 곳
    return MaterialApp(   // 구글 느낌 세팅을 제공해준다.
      home: Scaffold(  // 상중하로 나눠준다, 기준점을 왼쪽 위로 한다.
        body: CustomContainer(),
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
        margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12),
        decoration: BoxDecoration(
          color: Color(0xFF4EB442),
          border: Border.all(color: Colors.red, width: 5, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(100),
          boxShadow: [
            BoxShadow(color: Colors.black.withOpacity(0.3), offset: Offset(6,6), blurRadius: 10, spreadRadius: 10),
            BoxShadow(color: Colors.blue.withOpacity(0.3), offset: Offset(-6,-6), blurRadius: 10, spreadRadius: 10)
          ],
        ),
        child: Center(
            child: Container(
              color: Colors.yellow,
              child: Text("Hello world"),
            )),
      ),
    );
  }
}

 

 

 

이번엔 상하좌우를 이동하는 것에 대해 알아보자

 

이 코드는 위쪽에 딱 달라붙게 만들었다.

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.grey,
      child: Column(
      children: [
        Container(
          width: 100,
          height: 100, color: Colors.red,
          child: Text('container 1'),),
        Container(
          width: 100,
          height: 100, color: Colors.blue,
          child: Text('container 1'),),
        Container(
          width: 100,
          height: 100, color: Colors.green,
          child: Text('container 1'),),
      ],
      ),
    );
  }
}

center로 이동 시키면

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.grey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 100, color: Colors.red,
          child: Text('container 1'),),
        Container(
          width: 100,
          height: 100, color: Colors.blue,
          child: Text('container 1'),),
        Container(
          width: 100,
          height: 100, color: Colors.green,
          child: Text('container 1'),),
      ],
      ),
    );
  }
}

이처럼 이동한다.

 

crossAxisAlignment: CrossAxisAlignment.start,

추가하면

mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,

mainAxisSize를 min으로 하면 가장 상단에 배치된다.

컨테이너의 최솟값으로 지정하기 때문

 

 

 

좌우로 배치할 때를 보자

return Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,

두 개가 center라 해서 가운데에 오지 않는다.

 

return Container(
  height: double.infinity,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,

높이를 설정하면 움직인다.

 

 

 

 

스택을 이용해서 겹겹이 붙일수 있다

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(width: 500, height: 500, color: Colors.black,),
        Container(width: 400, height: 400, color: Colors.red,),
        Container(width: 300, height: 300, color: Colors.blue,),
        Positioned(
            bottom: 50,
            right: 30,
            child: Container(width: 200, height: 200, color: Colors.green,)),
      ],
    );
  }
}

 

 

align을 이용해서 배치도 가능하다.

Widget build(BuildContext context) {
  return Stack(
    children: [
      Container(width: 500, height: 500, color: Colors.black,),
      Container(width: 400, height: 400, color: Colors.red,),
      Container(width: 300, height: 300, color: Colors.blue,),
      Align(
        alignment: Alignment.topRight,
          child: Container(width: 200, height: 200, color: Colors.green,)),
    ],
  );
}

 

align을 숫자로 바꾸면

Widget build(BuildContext context) {
  return Stack(
    children: [
      Container(width: 500, height: 500, color: Colors.black,),
      Container(width: 400, height: 400, color: Colors.red,),
      Container(width: 300, height: 300, color: Colors.blue,),
      Align(
        alignment: Alignment(0.5,0.5),
          child: Container(width: 200, height: 200, color: Colors.green,)),
    ],
  );
}

 

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.red,
              borderRadius: BorderRadius.circular(150)
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(140),
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Text(
            'Count 8',
            style: TextStyle(color: Colors.red, fontSize: 32),
          ),
        )
      ],
    );
  }
}

 

 

 

 

Widget build(BuildContext context) {
  return Container(
    height: 500,
    width: 500,
    color: Colors.blue,
    child: Align(
      alignment: Alignment.topRight,
      child: Container(
        color: Colors.red,
        height: 300,
        width: 300,
      ),
    ),
  );
}