[#. Flutter] Flutter로 간단한 Todo List 만들기

 

 

 

 

 

 

아~주 간단한 Flutter Todo 리스트 예제를 진행해 보자

 

 

 

developer0809.tistory.com/124?category=967870

[#. flutter] Flutter로 Todo 앱 만들기, 설치 및 시작하기 1

 

위 글을 기준으로 flutter 프로젝트까지 생성한 후를 기준으로 시작하겠다

 

 

 

 

 

 

① list 추가, add 버튼 및 Input 추가

 

프로젝트명/lib/main.dart

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.blue,
      accentColor: Colors.orange
    ),
    home: MyApp(),
));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List todos = List();
  String input = "";

  @override
  void initState() {
    super.initState();
    todos.add("Item1");
    todos.add("Item2");
    todos.add("Item3");
    todos.add("Item4");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("mytodos"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context, 
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text("Add Todolist"),
                content: TextField(
                  onChanged: (String value) {
                    input = value;
                  },
                ),
                actions: <Widget>[
                  FlatButton(onPressed: (){
                    setState(() {
                      todos.add(input);
                    });
                  }, 
                  child: Text("Add"))
                ]
              );
            });
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(key: Key(todos[index]), child: Card(
            child: ListTile(title: Text(todos[index]),
            )
          ));
      }),
    );
  }
}

 

 

 

 

 

② list 각각 delete 버튼 추가

 

프로젝트명/lib/main.dart

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.blue,
      accentColor: Colors.orange
    ),
    home: MyApp(),
));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List todos = List();
  String input = "";

  @override
  void initState() {
    super.initState();
    todos.add("Item1");
    todos.add("Item2");
    todos.add("Item3");
    todos.add("Item4");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("mytodos"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text("Add Todolist"),
                content: TextField(
                  onChanged: (String value) {
                    input = value;
                  },
                ),
                actions: <Widget>[
                  FlatButton(onPressed: (){
                    setState(() {
                      todos.add(input);
                    });
                    Navigator.of(context).pop();	// input 입력 후 창 닫히도록
                  },
                  child: Text("Add"))
                ]
              );
            });
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(	// 삭제 버튼 및 기능 추가
            key: Key(todos[index]),
            child: Card(
              elevation: 4,
              margin: EdgeInsets.all(8),
              shape: RoundedRectangleBorder(borderRadius:
              BorderRadius.circular(8)
              ),
              child: ListTile(
                title: Text(todos[index]),
                trailing: IconButton(icon: Icon(
                  Icons.delete,
                  color: Colors.red
                ),
                onPressed: () {
                  setState(() {
                    todos.removeAt(index);
                  });
                }),
              )
          ));
      }),
    );
  }
}

 

 

 

 

 

 

 

이렇게 더미 데이터랑 삭제 버튼이 잘 뜰 것이다

 

 

 

 

 

 

③ 프로젝트명/lib/main.dart에서 dummy data 영역 삭제

 

  @override
  void initState() {
    super.initState();
    todos.add("Item1");
    todos.add("Item2");
    todos.add("Item3");
    todos.add("Item4");
  }

 

이 부분을 삭제해 주자

 

 

 

 

 

 

flutter run

 

명령어로 Xcode 시뮬레이터에서 확인하면 이렇게 잘 뜬다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

www.youtube.com/watch?v=KfhBsahIk7w