다음으로는 게시물을 작성하는 페이지의 UI를 구성해 볼 것이다.
정리하자면 다음과 같다.
1. 제목 입력을 위한 입력바 + 키보드 필요
2. 사진이 길면 잘릴수도 있으니 스크롤 기능 추가
3. Search page에서 버튼을 누르면 이동할 수 있도록 구성
4. 이미지 선택 버튼을 통해 이미지를 추가할 수 있도록 구성
전체 코드는 다음과 같다.
import 'package:flutter/material.dart';
class CreatePage extends StatelessWidget {
const CreatePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('새 게시물'),
actions: [
IconButton(onPressed: () {}, icon: const Icon(Icons.send)),
],
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
//widged -> scrollview
child: Column(
children: [
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "제목을 입력하세요",
fillColor: Colors.white70,
),
),
const SizedBox(height: 20,),
ElevatedButton(
onPressed: () {},
child: const Text('이미지 선택'),
),
Image.network(
'https://img.hankyung.com/photo/202211/BF.31807042.1.jpg',
width: 300,
),
],
),
),
),
);
}
}1. 페이지 연결
우선 Search 페이지에서 버튼을 누르면 이동할 수 있도록 페이지 연결 작업을 해야한다.
floatingActionButton: FloatingActionButton(
onPressed: () { //navpush
Navigator.push(
context,
MaterialPageRoute( builder:
(context) => const CreatePage()),
);
},search 페이지의 onPress 부분에 버튼을 누르면 다른 페이지로 이동할 수 있는 함수를 구성한다.
이 부분은 단축키를 설정해서 "navpush"를 입력하면 자동으로 입력될 수 있도록 하였다.
단축키 설정 방법은 다음과 같다.(window 기준)
file > setting > live templates로 이동한다.
flutter단에 +를 이용해서 기능을 추가해주면 된다.
다음과 같이 Mavigator.push 함수의 전문을 text로 입력해두었다.
"$$"로 묶여진 부분은 변수값을 대체할때 사용한다.
2. Text field 작성하기
child: Column(
children: [
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "제목을 입력하세요",
fillColor: Colors.white70,
),
),우선 text 부분의 경우 세로 방향으로 정렬되어 있으므로 Column 값을 이용한다.
TextField의 값을 정의하는 방법은 여러가지가 있는데, 우선 StackoverFlow에 나와 있는 다음의 값을 사용하기로 한다.
- https://stackoverflow.com/questions/49257641/how-can-i-make-rounded-textfield-in-flutter
Border를 통해 입력 값을 받아올 수 있고, color지정 및 래디우스 지정(모서리 둥근 정도)도 가능하다.
2. 이미지 선택 버튼
ElevatedButton(
onPressed: () {},
child: const Text('이미지 선택'),
),이미지 선택을 위한 버튼을 만든다.
ElevatedButton
사용자가 터치하면 동작을 수행할 수 있는 높이가 높은(혹은 "유레친"한) 버튼을 만든다.
3. Scroll 적용
키보드가 올라올때, 길이가 긴 이미지의 경우 잘릴 수 있다. 이를 방지하기 위해 scroll이 가능한 기능을 적용할 것이다.
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
//widged -> scrollview
child: Column(다음과 같이 Column(스크롤을 적용할 부분)을 SingleChildScrollView로 감싸주면 된다. 이는 Widget으로 감싸준 다음에 변경하면 된다.
전체적으로 Padding 값을 주기 위해 Padding도 설정하였다.
4. 결과
