[Flutter] 단일 박스(Container) 위젯 작성

📚 Container, SizedBox, Center

1. Center

child 를 가운데 배치합니다.

const Center(
   child: Text('Flutter My Home Page');
)

2. Containsar

child 레이아웃의 위젯

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: const Text('Flutter My App Bar')),
      ),
      body: Container(
        color: Colors.yellow,
        alignment: const Alignment(1, -1),
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 50,
        ),
        margin: const EdgeInsets.symmetric(
          horizontal: 50,
          vertical: 50,
        ),
        width: 100,
        height: 300,
        child: const Text('Flutter My Home Page'),
      ),
    );
  }
}

 

 

 

 

📍 Alignment

x축
• -1 left
• 0 center
• 1 right

y축
• -1 bottom
• 0 center
• -1 top

// x = 0 center
// y = 0 center
alignment: const Alignment(1, -1.1),