Flutter 배치 팁

[Flutter] 배치할 때 공식

Mar 09, 2024

💡

1. Column 은 세로는 Block 가로는 Inline 속성 2. Row 는 가로는 Block 세로는 Inline 속성 어떤 디자인을 할 때 Column은 미리 크기를 키워놔야 한다. Row는 괜찮음 (휴대폰은 대부분 세로이기 때문) 3. 컨테이너는 자식이 없으면 Block, 자식이 있으면 Inline 이다. 4. ListView 는 가로는 Block 세로는 Inline

ㅤ	Block	Inline
Column	세로	가로
Row	가로	세로
Container	자식x	자식o
ListView	가로	세로

Column은 SizedBox로 가로를 끝까지 늘려준다.(나중에 배치하기 편하게)

Row는 가로가 어차피 끝까지 이기 때문에 가만히 둔다.

한개 짜리는 Align으로 배치해준다.

배치의 핵심은 Block을 다 만드는 것


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: Column(
        children: [
          _top(),
          _center(),
          _bottom(),
        ],
      ),
    );
  }

  Widget _bottom() {
    return Align(
      alignment: Alignment.centerRight,
      child: Container(
        color: Colors.red,
        width: 50,
        height: 50,
      ),
    );
  }

  Widget _center() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.red,
          width: 50,
          height: 50,
        ),
        Container(
          color: Colors.green,
          width: 50,
          height: 50,
        ),
        Container(
          color: Colors.blue,
          width: 50,
          height: 50,
        ),
      ],
    );
  }

  Widget _top() {
    return SizedBox(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            color: Colors.red,
            width: 50,
            height: 50,
          ),
          Container(
            color: Colors.green,
            width: 50,
            height: 50,
          ),
          Container(
            color: Colors.blue,
            width: 50,
            height: 50,
          ),
        ],
      ),
    );
  }

  AppBar _appbar() {
    return AppBar(
      actions: [
        Icon(CupertinoIcons.search),
        SizedBox(width: 15),
        Icon(
          CupertinoIcons.heart,
          color: Colors.redAccent,
        ),
        SizedBox(width: 15),
      ],
    );
  }
}


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            color: Colors.red,
            width: 50,
            height: 50,
          ),
          Container(
            color: Colors.green,
            width: 50,
            height: 50,
          ),
          Container(
            color: Colors.blue,
            width: 50,
            height: 50,
          ),
          Row(
            children: [
              Container(
                color: Colors.red,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.green,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.blue,
                width: 50,
                height: 50,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
            ],
          ),
        ],
      ),
    );
  }

  AppBar _appbar() {
    return AppBar(
      actions: [
        Icon(CupertinoIcons.search),
        SizedBox(width: 15),
        Icon(
          CupertinoIcons.heart,
          color: Colors.redAccent,
        ),
        SizedBox(width: 15),
      ],
    );
  }
}

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class RecipePage extends StatelessWidget { const RecipePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: _appbar(), body: Column( children: [ _top(), _center(), _bottom(), ], ), ); } Widget _bottom() { return Align( alignment: Alignment.centerRight, child: Container( color: Colors.red, width: 50, height: 50, ), ); } Widget _center() { return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( color: Colors.red, width: 50, height: 50, ), Container( color: Colors.green, width: 50, height: 50, ), Container( color: Colors.blue, width: 50, height: 50, ), ], ); } Widget _top() { return SizedBox( width: double.infinity, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( color: Colors.red, width: 50, height: 50, ), Container( color: Colors.green, width: 50, height: 50, ), Container( color: Colors.blue, width: 50, height: 50, ), ], ), ); } AppBar _appbar() { return AppBar( actions: [ Icon(CupertinoIcons.search), SizedBox(width: 15), Icon( CupertinoIcons.heart, color: Colors.redAccent, ), SizedBox(width: 15), ], ); } }

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class RecipePage extends StatelessWidget { const RecipePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: _appbar(), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( color: Colors.red, width: 50, height: 50, ), Container( color: Colors.green, width: 50, height: 50, ), Container( color: Colors.blue, width: 50, height: 50, ), Row( children: [ Container( color: Colors.red, width: 50, height: 50, ), Container( color: Colors.green, width: 50, height: 50, ), Container( color: Colors.blue, width: 50, height: 50, ), ], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( color: Colors.yellow, width: 50, height: 50, ), ], ), ], ), ); } AppBar _appbar() { return AppBar( actions: [ Icon(CupertinoIcons.search), SizedBox(width: 15), Icon( CupertinoIcons.heart, color: Colors.redAccent, ), SizedBox(width: 15), ], ); } }