플러터(Flutter) 위치에 대해 개념잡기

Row 위젯 내부의 mainAxisAlignment를 바꿔가면서 했을 때 어떻게 될까?

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Row(
        mainAxisAlignment: MainAxisAlignment.{something},
        children: <Widget>[
          Container(
            height: 100,
            color: Colors.red,
            child: const Text('Item 1'),
          ),
        ],
      )),
    );
  }
}

• center
  

• end
  

Column 위젯 내부의 mainAxisAlignment를 바꿔가면서 했을 때 어떻게 될까?

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        mainAxisAlignment: MainAxisAlignment.{something},
        children: <Widget>[
          Container(
            height: 100,
            color: Colors.red,
            child: const Text('Item 1'),
          ),
        ],
      )),
    );
  }
}

• center
  

• end
  

3개의 위젯을 중간으로 옮기려면?

제대로 된 답이 맞는진 모르겠지만 Column을 상위로 감싸서 center로 보낸 뒤 Row로 감싸 수평축의 center로 또 보냈다.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(
                height: 100,
                color: Colors.red,
                child: const Text('Item 1'),
              ),
              Container(
                height: 100,
                color: Colors.blue,
                child: Text('Item 2'),
              ),
              Container(
                height: 100,
                color: Colors.orange,
                child: Text('Item 3'),
              ),
            ],
          ),
        ],
      )),
    );
  }
}

• 결과
  

만약 첫번째 아이템에 대해 Text가 더 길다면 Text의 길이만큼 요소의 가로 길이가 늘어난다.

언젠간 잘해질 수 있겠지?ㅎㅎ