[플러터] 8일차 - 노트 편집 화면 추가하기

 

• page/note_list_page.dart 추가

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class NoteEditPage extends StatefulWidget {

  @override
  State createState() => _NoteEditPageState();
}

class _NoteEditPageState extends State<NoteEditPage> {
  late String title;
  late String body;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('노트 편집'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '제목 입력'
              ),
              maxLines: 1,
              style: TextStyle(fontSize: 20.0),
              onChanged: (text) {
                title = text;
              },
            ),
            SizedBox(height: 8.0),
            TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: '노트 입력',
              ),
              maxLines: null,
              keyboardType: TextInputType.multiline,
              onChanged: (text) {
                body = text;
              },
            )
          ],
        ),
      ),
    );
  }
}

외곽선을 넣기 위해 TextField에 decoration을 사용

 

본문에 입력받을 입력 Field는 제목과 띄우기 위해서 SizedBox.

 

그냥 Column 쓰면 본문이 길어졌을때 오버플로우 에러가 나니까 SingleChildScrollView

 

 

• 화면을 확인하기 위해 main.dart 에서 home을 변경하자.

import 'package:flutter/material.dart';
import 'package:sticky_notes/page/note_edit_page.dart';
import 'package:sticky_notes/page/note_list_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Notes',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity
      ),
      home: NoteEditPage(),
    );
  }
}

 

 

Uploaded by Notion2Tistory v1.1.0