[Flutter] 페이지 채워보기, 메뉴 4칸 2줄

 앞의 코드 이어서 작성,

이것은 page1 클래스이다.

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTop(),
        _buildMiddle(),
        _buildBottom(),
      ],
    );
  }

  //상단
  Widget _buildTop() {
    return Text(
      'Top',
      style: TextStyle(fontSize: 20),
    );
  }

  //중단
  Widget _buildMiddle() {
    return Text(
      'Middle',
      style: TextStyle(fontSize: 20),
    );
  }

  //하단
  Widget _buildBottom() {
    return Text(
      'Bottom',
      style: TextStyle(fontSize: 20),
    );
  }
}

 

 

이후의 작성 순서

1. 메뉴 만들기( 한줄에 4개인 )

2. 메뉴 두줄로 만들기

(오늘은 여기까지)

 

4. 메뉴 7개로 줄이기

5. 클릭 가능하게 하고 전체 여백

 

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTop(),
        _buildMiddle(),
        _buildBottom(),
      ],
    );
  }

  //상단
  Widget _buildTop() {
    return Column(
      children: <Widget>[
        Row(
          // spaceEvenly , 위젯 사이 공간 동일한 비율로
          // 이거 안하면 왼쪽으로 위젯들 딱 붙어있음ㅋㅋ
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          // spaceEvenly , 위젯 사이 공간 동일한 비율로
          // 이거 안하면 왼쪽으로 위젯들 딱 붙어있음ㅋㅋ
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(
                  Icons.ac_unit,
                  size: 40,
                ),
                Text('눈송이')
              ],
            ),
          ],
        ),
      ],
    );
  }

  //중단
  Widget _buildMiddle() {
    return Text('Middle');
  }

  //하단
  Widget _buildBottom() {
    return Text('Bottom');
  }
}

 

 

어지럽다 ^^

 

일단 처음에는 children: <Widger>[

   Column(),

   Column(),

   Column(),

   Column(),

]

이렇게 4개의 눈꽃을 만들고,

다시 Row로 감쌌다.

감싼 Row를 다시,

 

children: <Widger>[

  Row(안에 위의 코드 있음),

  SizeBox().

  Row(안에 위의 코드 있음),

]

 

이렇게 만듦

정말이지 벌써부터 덕지덕지 헷갈리고 보기 좋지 않은 코드다.

 

끄아아아아아 ㄱ