Flutter와 Firebase로 Android iOS 둘 다 만들기 9 파이어스토어 화면에서 읽고 쓰기

플러터에서 파이어스토어 데이터를 쓰고 화면에 표시해봅니다.

쓰기 페이지 만들기

Navigation을 이용해서 새로운 페이지에서 작성합니다.

팝업등을 띄울 수도 있지만, 좁은 모바일에서는 새로운 페이지에서 작성하는 게 더 어울릴 것 같습니다.

참고: https://flutter-ko.dev/docs/cookbook/navigation/navigation-basics

페이지 작성

class WriteDoc extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Write doc")
      ),
      body: Center(
        child: Text('write')
      )
    );
  }
}

바깥 쪽에 클래스를 하나 만들어둡니다.

페이지 이동

Widget _main () {
  return Scaffold(
    appBar: AppBar(
      title: Text('app.user'),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => WriteDoc()),
            );              
          },
        ),
        IconButton(
          icon: Icon(Icons.account_circle),
          onPressed: () {
            _signOut();
          },
        )
      ],
    )
    // ...
  );
}

Navigator.push 를 이용해서 위에 만들어둔 클래스로 이동 시킵니다.

원래 페이지로 돌아오기

상단에 자동 생성된 백버튼을 눌러도 되지만 쓰고나면 프로그래밍방식으로 돌아가야되기 때문에 코드로 넣습니다.

class WriteDoc extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Write doc")
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        )
      )
    );
  }
}

실제 데이터 쓰고 원래 페이지로 돌아오기

class WriteDoc extends StatelessWidget {
  var title, subtitle;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Write doc"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () async {
              await Firestore.instance.collection('test').add({ 'title': title, 'subtitle': subtitle });
              title = ''; subtitle = '';
              Navigator.pop(context);
            },
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              onChanged: (text) => title = text,
            ),
            TextField(
              onChanged: (text) => subtitle = text,
            ),
          ]
        ),
      )
    );
  }
}

title과 subtitle을 TextField로 입력 받고 Firestore에 추가합니다.

목록 보기

일회성 이벤트로 데이터를 불러올 수도 있지만, 스트리밍 시킬 수 있습니다.

StreamBuilder

StreamBuilder를 통해서 동적으로 리스트를 가져 올 수 있습니다.

동적으로 가져온 리스트는 ListView에 표시하면 됩니다.

참고: https://pub.dev/packages/cloud_firestore

Widget _list () {
  return StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection('test').snapshots(),
    builder: (context, snapshot) {
      final items = snapshot.data.documents;
      return ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return ListTile(
            title: Text(item['title']),
            subtitle: Text(item['subtitle'])
          );
        },
      );
    }
  );
}

소스코드

https://github.com/fkkmemi/ff

영상