Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- TEST
- 안드로이드
- appbar
- Navigation
- 계측
- 앱
- Button
- scroll
- binding
- intent
- LifeCycle
- livedata
- viewmodel
- DART
- textview
- textfield
- tabbar
- data
- ScrollView
- 앱바
- 테스트
- Flutter
- Compose
- activity
- Kotlin
- Dialog
- android
- drift
- CustomScrollView
- Coroutines
Archives
- Today
- Total
Study Record
[Flutter] 입력 폼이 포함된 화면 자연스럽게 구성하기 본문
728x90
✍ 입력 폼이 포함된 화면
입력 폼(TextField, TextFormField 등)이 포함된 화면은 키보드가 올라와 화면을 가리면서 overflowed 가 날 수 있다.
이럴 경우 SingleChildScrollView 를 최상단에 위젯 상단에 배치하면 키보드가 올라와도 스크롤이 가능하기 때문에 overflowed 문제가 생기지 않는다.
😶 예시)
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: ScrollControlView()));
class ScrollControlView extends StatelessWidget {
const ScrollControlView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
"asset/img/middle_image.png",
height: MediaQuery.of(context).size.height / 2,
),
const SizedBox(height: 16.0),
TextField(),
TextField(),
const SizedBox(height: 16.0),
Text("스크롤 테스트 화면"),
],
),
),
),
);
}
}
728x90
'Flutter' 카테고리의 다른 글
[AndroidStudio] 자동 완성 설정하기 (Live Templates) (0) | 2023.04.14 |
---|---|
[Flutter] Run start ms-settings:developers (0) | 2023.04.07 |
[Flutter] 안드로이드 스튜디오 dart version 설정하기 - Windows (0) | 2023.03.23 |
[Flutter] 위젯이 차지하는 크기 알아보기 (LayoutBuilder) (0) | 2023.03.13 |
[Flutter] 앱 바 사이즈 (0) | 2023.03.12 |