[단어장 앱 개발 일지] 24일째 : Flutter UI 절대 위치 지정하기

by

Flutter UI 절대 위치 지정 에 대해 알아보자

플러터 (Flutter) 에서 키보드를 입력하려고 하면, 미리 지정된 UI가 위로 올라가는 문제가 발생했다. 이를 방지하고, UI를 절대적인 위치에 고정시켜 보았다.

오늘의 할 일​

  • ✅️ 단어 입력 창 고정시키기
    • 단어 추가 화면에서 SingleChildScrollView 제어하고 Padding 넣어서 위치 고정시키기

왜 SingleChildScrollView를 쓰는 걸까?

오늘은 매직 스크롤이라고 불리는 SingleChildScrollView에 대해 짚고 넘어가려고 한다. 이걸 사용하는 이유는 스크린이 작아서 사용자가 필요한 모든 걸 볼 수 없다고 판단될 때, 자동으로 스크롤을 생성해 위에서 아래로 쭉 볼 수 있게 해주기 때문이다. 특히, 키보드가 화면을 가릴 때, 반응형으로 UI가 올라가도록 하는 기능도 구현이 된다. 하지만 자동 스크롤 기능이 불편할 때도 있는데, 반복된 행동을 사용자가 많이 해야 되는 상황이 그렇다. 나 같은 경우, 단어를 반복으로 추가할 때계속해서 UI가 올라갔다가 내려갔다가 하면 사용자 입장에서 매우 불편할 수 있어 이를 절대 위치로 변경했다.

SingleChildScrollView에 대한 간단한 예시

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SingleChildScrollView Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 200,
                color: Colors.red,
              ),
              Container(
                height: 200,
                color: Colors.green,
              ),
              Container(
                height: 200,
                color: Colors.blue,
              ),
              Container(
                height: 200,
                color: Colors.yellow,
              ),
              Container(
                height: 200,
                color: Colors.purple,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예시에서는 SingleChildScrollView의 자식으로 Column 위젯을 사용하고, 그 안에 높이가 200인 Container 위젯들을 배치했다. 화면의 높이보다 자식 위젯들의 전체 높이가 크기 때문에 자동으로 스크롤 기능이 활성화된다. SingleChildScrollView는 자식 위젯의 크기가 부모 위젯의 크기보다 큰 경우에 유용하게 사용할 수 있다. 예를 들어, 긴 텍스트나 여러 개의 위젯을 표시해야 할 때 SingleChildScrollView를 사용하면 편리하다.

Flutter UI 절대 위치 지정을 위한 코드 수정

자동 스크롤을 지우고, 화면의 높이를 정확히 알 수 있게 도와주는 MediaQuery를 사용해 필요한 곳에 정확하게 UI 요소를 배치할 수 있다 (Fluter UI 절대 위치라고는 하기 그런게, padding을 줘서 상대적으로 1/3 위치에 있게 설정 가능하다) . 이렇게 하면 키보드가 올라와도, 사용자가 입력해야 하는 부분이 움직이지 않아 반복 작업하기 쉽다.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    // Set 10% of screen height as top padding
    double topPadding = MediaQuery.of(context).size.height * 0.1;
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(top: topPadding),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 50.0),
              child: TextField(
                controller: _wordController,
                decoration: InputDecoration(
                  labelText: 'Type your word',
                  suffixIcon: IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {
                      if (_wordController.text.isNotEmpty) {
                        translateWord(_wordController.text, _translationController);
                      }
                    },
                  ),
                  border: UnderlineInputBorder(),
                ),
              ),
            ),
            SizedBox(height: 50),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 50.0),
              child: TextField(
                controller: _translationController,
                decoration: InputDecoration(
                  labelText: "Meaning",
                  border: UnderlineInputBorder(),
                ),
              ),
            ),
            SizedBox(height: 20),
            actionButtons(_wordController, _translationController),
          ],
        ),
      ),
    );
  },
);

Single child scroll view vs flutter UI 절대 위치 지정?

SingleChildScrollView의 장단점에 대해 생각해본다면, 스크롤 반응형은 화면이 작은 폰에서 많은 정보를 보여줘야 할 때 그 진가를 발휘한다. 하지만 고정이 필요한 위젯이 있다면 이를 삭제해줘야 편하가. 반면에 절댓값과 패딩값을 사용하면, 앱 기확자가 원하는 위치에 정확하게 UI를 고정 시킬 수 있어서 특정한 경우에는 훨씬 편리하다. 화면 배치만 애초에 잘 해둔다면, 스크롤 없이도 모든 게 잘 보이기 때문이다. 그래서 어떤 상황에 어떤 방법을 사용할지는 기획자의 선택에 달려 있다. 작은 화면에서 많은 정보를 다룰 때는 싱글 차일드 스크롤 뷰를, 그리고 더 안정적이고 정확한 위치 조정이 필요할 때는 절대값과 패딩을 사용하면 된다.

Issue) 단어 디바이스에 저장 되도록 sqflite.dart 완료했으나

import ‘package:sqflite/sqflite.dart’;
import ‘package:path/path.dart’;

에러나서 열 때마다 하얀 화면이 나오거나 잘 나오거나 한다.

에러 메시지는

Debug service listening on ws://127.0.0.1:11655/1spz7_Uw6RE=/ws
Syncing files to device sdk gphone64 x86 64...
I/orld_flutter_01(17149): Compiler allocated 4533KB to compile void android.view.ViewRootImpl.performTraversals()
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502
E/emuglGLESv2_enc(17149): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetUniformLocation:2183 GL error 0x502

이유가 뭘까나..

근데 일단 핸드폰에서는 작동이 잘된다!

해야 할 일

  • 플러터로 이전 코틀린 버전까지 맞추기 (거의 다왔다)
    • ✅ 웹 뷰
    • ✅ 단어 추가해서 리스트에 넣는 기능
    • 단어 리스트 UI (검색 버튼, 케밥메뉴, 넘버링)
  • 디바이스에 저장해서 실생활에 바로 사용 가능 하도록 만들기
    • ing… 에러 해결 시급
  • 애플 기기에서 실행해보기
  • 토글 기능으로 단어 숨기게 만들기
  • 단어 정렬 기능 넣기
  • 자동 추가 탭 구상하기 (여러 단어 한꺼번에 찾아주는 기능)

​

여기까지 하고 스토어에 등록하기 도전!

  • 튜터 찾기 (만들어 주는 사람은 많은데 과외는 없다?)

관련 읽을 거리

  1. Flutter UI: Absolute positioned element with fixed height and 100% width: This Stack Overflow post discusses how to create a Container with a fixed height and 100% width in Flutter, and how to offset this row a few pixels offscreen1.
  2. Position absolute for Flutter: Another Stack Overflow post where the user is trying to create a “drum kit” application and is looking for a way to set Drum Kit parts as it should be, similar to the position absolute option for the elements on the webpage in web development2.
  3. Flutter Widget Positioning – A Guide for the CSS Developer: This guide on Fireship.io provides a comparison between Flutter widgets and CSS for positioning, aligning, and building layouts3.

관련 게시글

#앱개발 #안드로이드스튜디오 #플러터 #개발자

Leave a Comment