[Flutter]Align 위젯

현재 화면에는 Container위젯이있다.

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
        ),
      ),
    );
  }
}

만약 Container 안에 글자를 넣어야된다면 child: Text("")를 하면 될것이다.

Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Text("Text"),ㅇ
        )

정상적으로 출력된다 하지만 Text를 중앙에 넣고 싶다면? Center()를 쓰면된다.

Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Center(child: Text("Text")),
        )

근데 여기서 나는 우측 아래에다가 Text를 넣어야 한다면? 어떻게 해야할까? 바로 Align위젯을 사용하면된다.

Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Align(
            alignment: Alignment.bottomRight,
            child: Text("Text"),
          ),
        )

그럼 Align을 쓰면 그냥 정해진 곳만 넣어야 되나? 원하는 곳은 못 넣나? 라고 생각한다면 Alignment(x,y)을 사용하면된다.

x,y의 0값은 중앙이다.

Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Align(
            alignment: Alignment(0.8, 0.2),
            child: Text("Text"),
          ),
        )

근데 자신이 x,y의 0값이 중앙인것이 맘에들지 않는다면 FractionalOffset(x,y)를 사용하면된다.

Container(
          width: 100,
          height: 100,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.black)),
          child: Align(
            alignment: FractionalOffset(0.8, 0.2),
            child: Text("Text"),
          ),
        )