[Flutter] Row, Column

flutter에서 쓸수 있는 Row, Column 함수를 공부해보자

기본적으로 행열로 Container를 붙이는 형태이다. 거기서 이제 Container를 더 씌워서 옮길지 같이 옮길지 고민하면된다.

웹개발을 좀 해본사람들은 크게 감이 잡힐거다. 다만 함수를 어떻게 사용하는지 보면 될거같다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300, // Container 구분을 위한 임의로 지정
      width: double.infinity,
      color: Colors.grey,
      // child: Column(
      child: Row(
        mainAxisSize: MainAxisSize.max, // 위아래 최대치 어떻게 할지
        mainAxisAlignment: MainAxisAlignment.center, // 한가운데로 모으기
        crossAxisAlignment: CrossAxisAlignment.start, // 왼쪽이동
        children: [
          Container(
              width: 100,
              height: 80,
              color: Colors.red,
              child: Text('Container1')),
          Container(
              width: 100,
              height: 80,
              color: Colors.green,
              child: Text('Container2')),
          Container(
              width: 100,
              height: 80,
              color: Colors.blue,
              child: Text('Container3')),
        ],
      ),
    );
  }
}

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      // crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Row(
            mainAxisSize: MainAxisSize.max, // 위아래 최대치 어떻게 할지
            mainAxisAlignment: MainAxisAlignment.center, // 한가운데로 모으기
            // crossAxisAlignment: CrossAxisAlignment.start, // 왼쪽이동
            children: [
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.red,
                  child: Text('Container1')),
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.green,
                  child: Text('Container2')),
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.blue,
                  child: Text('Container3')),
            ],
          ),
        Container(
          width: 300,
          height: 120,
          color: Colors.grey,
          child: Text('Container4'),
        )
      ],
    );
  }
}

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView( // 스크롤을 쓰면은 컬럼이 전체 화면보다 초과해도 해결이 가능
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          Container(
            color: Colors.grey,
            width: double.infinity,
            height: 100,
            margin: EdgeInsets.symmetric(vertical: 8),
          ),
          ]
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Let's Study Container"),
        ),
        body: Body(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 200,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 200,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 200,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 200,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
          ]
      ),
    );
  }
}