[flutter] 스크롤 없는 앱 화면 만들기

Column 은 스크롤을 지원하지 않는다.

HootJem

Sep 30, 2024

Contents

1. 프로젝트 생성 2. MyApp 코드 작성 3. 그림 넣기 4. 완성 화면 마무리

화면을 만들기 전에 먼저 플러터의 공식 홈페이지에 접속해 보자.

Docs 에 들어간 뒤 아래 버튼을 누른다.

이러한 위젯들이 존재하는데 이를 활용하여 화면을 구성하면 된다.

1. 프로젝트 생성

2. MyApp 코드 작성

STL 이라고 치면 StatelessWidget자동 완성이 활성화 된다.


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

이대로 실행해 보면 플레이스 홀더가 나온다.

안드로이드, ios 개발에 따라 어떤 디자인을 사용할지 정해야 한다. 안드로이드 개발이므로 MaterialApp 적어주었다.


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(), // 앱을 구조화 시킴
    );
  }

2.1 Column , Row

기본적으로 리턴 값은 하나만 가질 수 있다. (body) 이때 Column 위젯을 쓸 수 있다. 컬럼은 수직 방향 레이아웃 구조를 만들어 주고 child가 아닌 children 속성을 가진다.

위에 작성한 것 처럼 컬럼은 수직방향 그리고 children 속성이다. 이 속성은 많은 위젯을 가질 수 있다.

Row 는 수평방향 Column 은 수직방향 레이아웃 구조를 갖고 있음을 확인할 수 있다.

2.2.1 `spaceEvenly`

Spacer() 추가 : 남는 자리는 자기가 차지한다.


 Row(
        children: [
          Spacer(),
          Text("data"),
          Spacer(),
          Text("data"),
          Spacer(),
          Text("data"),
          Spacer(),
          Text("data"),
          Spacer()
        ],
      ),


Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text("data"),
        Text("data"),
        Text("data"),
        Text("data"),
      ],
    )

결과는 똑같다.

2.2.2 `spaceBetween`


Row(
      children: [
        Text("data"),
        Spacer(),
        Text("data"),
        Spacer(),
        Text("data"),
        Spacer(),
        Text("data"),
      ],
    ),


Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("data"),
          Text("data"),
          Text("data"),
          Text("data"),
        ],
      ),

원하는 디자인에 따라 적절히 활용할 수 있어야 한다.

Open Flutter Devtools

콘솔 옆에 있는 파란 버튼을 눌러보자.

이런 화면이 열린다. 확인할 Row 를 선택하고, Select Widget Mode 를 선택한다.

에뮬레이터의 Row 에 해당하는 부분에 표시가 생긴다. 이를 확인하며 스타일을 지정한다.

2.2 Padding

패딩을 감싸줄 Row 를 누른채로 alt+엔터 누르면 이 창이 나온다. 여기서 패딩을 설정한다.

EdgeInsets.all 인데 only 등을 사용하여 padding top 을 만들 수 도 있다.

💡

padding 은 16 픽셀을 주는게 국룰이다.

참고하여 수정

3. 그림 넣기

먼저 플레이스홀더를 사용하여 위치를 체크해본다.


     children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Woman", style: TextStyle(fontSize: 16)),
                  Text("Kids", style: TextStyle(fontSize: 16)),
                  Text("Shoes", style: TextStyle(fontSize: 16)),
                  Text("Bag", style: TextStyle(fontSize: 16)),
                ],
              ),
            ), //타입 일치를 위해 사용.
            Placeholder(),
            Placeholder(),
          ],

OverFlow 에러가 뜬다.

남아있는 영역 만큼만 차지하라는 의미. 선택한 Placeholder 가 그렇게 된다.


 return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Woman", style: TextStyle(fontSize: 16)),
                  Text("Kids", style: TextStyle(fontSize: 16)),
                  Text("Shoes", style: TextStyle(fontSize: 16)),
                  Text("Bag", style: TextStyle(fontSize: 16)),
                ],
              ),
            ), //타입 일치를 위해 사용.
            Expanded(child: Placeholder()),
            Expanded(child: Placeholder()),
          ],
        ),
      ),
    );

플레이스 홀더 둘 다 Expanded 를 주면 동일 한 크기가 된다. (절대로 높이값을 직접 주지 않음)

3.1 이미지 사이에 빈 공간

플러터에는 margin 이 없다. 따라서 SizeBox 를 사용하여 빈 공간을 형성한다.


Expanded(child: Placeholder()),
SizedBox(height: 10),
Expanded(child: Placeholder()),

3.2 이미지 삽입

이미지가 들어갈 box 사이즈를 정했으니 이미지를 넣을 것이다.

앱 최상단에 assets 폴더를 생성한 뒤

이미지를 넣고, pubspec.yaml에서 설정을 한다.

assets 으로 사용할 폴더는 assets/ 이라고 설정하는 것이다. (방금 만든 폴더 이름+/)

설정마무리를 위해 Pub get 을 누른다.

이때 yaml 파일은 핫 리로드로 되지 않고 서버를 다시 실행시켜야 반영된다.

방금 상단에서 펌웨어 설정을 마무리 했기 때문에 Image.asset 을 사용하여 처리한다.

사용한 이미지가 바로 들어가진다.

Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),

이미지에 스타일 추가함. 아래쪽에도 이미지 추가하면 완성된다.

4. 완성 화면

제법 그럴듯해 보이는데 😉 문제점은 웹에서는 가로 길이에 따라 이미지가 조금 다른 크기로 출력된다. 그리도 웹을 보며 개발했지만 앱, 웹 둘 다 빌드가 가능하다는 것을 확인할 수 있었다.

핸드폰의 기본 상단이 있는 부분에는 디자인을 해선 안된다.

body를 SafeArea 로 수정하여야 한다.

전체 코드


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("Woman", style: TextStyle(fontSize: 16)),
                      Text("Woman", style: TextStyle(fontSize: 16)),
                      Text("Woman", style: TextStyle(fontSize: 16)),
                      Text("Woman", style: TextStyle(fontSize: 16)),
                    ],
                  ),
                ),
                Expanded(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
                SizedBox(height: 10),
                Expanded(child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
              ],
            )
        ),
      ),
    );
  }
}

마무리

플루터 사이트 나 홈페이지들 가면 무료 템플릿 제공함 그거보고 공부도 ㅇㅇ

꼭 개발 문서를 확인해야한다!!!