Dart - Row

row란?

자식을 수평 배열로 표시하는 위젯이다.
행 위젯 은 스크롤되지 않습니다(일반적으로 사용 가능한 공간에 맞는 것보다 행 에 더 많은 자식이 있는 것은 오류로 간주된다. ). 위젯 라인이 있고 공간이 부족한 경우 스크롤할 수 있게 하려면 ListView를 사용하는 것을 추천한다. .

어떻게 생성할까?

Row(
MainAxisAlignment mainAxisAlignment = ?, // ?은 원하는 설정으로 입력하면 된다.
MainAxisSize mainAxisSize = ?,
CrossAxisAlignment crossAxisAlignment = ?,
VerticalDirection verticalDirection = ?,
List<Widget> children = const <Widget>[
	// 아래 내용들이 수평으로 배열된다.
]
)

자식을 확장시켜 사용 가능한 가로 공간을 채우도록 하려면 자식을 Expanded 사용하여 위젯으로 Wrap하여 사용할 수 있다.

예시 코드를 통해 확인해보자.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child : Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
   Container(
     color : Colors.yellow,
     child : Text('hello'),
     width : 100,
     height : 100,
   ),
     Container(
     color : Colors.blue,
     child : Text('hello'),
     width : 100,
     height : 100,
       
   ),
     Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
     Container(
     color : Colors.red,
     child : Text('hello'),
     width : 100,
     height : 100,
   ),
  ]
)
    );
  }
}

실행결과

DartPad로 우린 자식요소들이 수평으로 배열되는 것을 확인할 수 있다.