flutter 에서 Column 의 각요소 정렬 위치 다르게 설정하는 방법

2024-01-02

---

사진: Unsplash 의 Denise Sonnemberg

---

1. 방법 

 

mainAxisAlignment: MainAxisAlignment.start 와  mainAxisAlignment: MainAxisAlignment.end 를 활용해 각 좌측 우측 정렬을 적용해준다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Left and Right Align'),
        ),
        body: Column(
          children: [
            // 첫 번째 위젯을 좌측 정렬
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.all(16.0),
                  child: Text('Left Widget'),
                ),
              ],
            ),
            // 두 번째 위젯을 우측 정렬
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  padding: EdgeInsets.all(16.0),
                  child: Text('Right Widget'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

---

메인 이미지 출처 : 사진: Unsplash의Denise Sonnemberg