記事の内容
この記事では、FlutterでTextの中身を空にする方法を紹介します。
具体的にはTextEditingControllerを使って、ボタンを押した後にTextの中身を空にします。
実装後の画面
下記の画面で、「Send」を押した後に、左にあるTextを空にします。
実装方法
TextEditingControllerを使います。
final messageTextController = TextEditingController();
対象のフィールドにTextEditingControllerをセットします。
child: TextField(
controller: messageTextController,
onChanged: (value) {
messageText = value;
},
decoration: kMessageTextFieldDecoration,
),
ボタンを押した後にクリアします。
onPressed: () {
messageTextController.clear();
_firestore.collection('messages').add({
'text': messageText,
'sender': loggedInUser.email,
});
},
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:cloud_firestore/cloud_firestore.dart'; | |
| import 'package:firebase_auth/firebase_auth.dart'; | |
| import 'package:flash_chat/constants.dart'; | |
| import 'package:flutter/material.dart'; | |
| final _firestore = Firestore.instance; | |
| class ChatScreen extends StatefulWidget { | |
| static const String id = 'chat_screen'; | |
| @override | |
| _ChatScreenState createState() => _ChatScreenState(); | |
| } | |
| class _ChatScreenState extends State<ChatScreen> { | |
| final messageTextController = TextEditingController(); | |
| final _auth = FirebaseAuth.instance; | |
| String messageText; | |
| FirebaseUser loggedInUser; | |
| @override | |
| void initState() { | |
| // TODO: implement initState | |
| super.initState(); | |
| getCurrentUser(); | |
| } | |
| void getCurrentUser() async { | |
| try { | |
| final user = await _auth.currentUser(); | |
| if (user != null) { | |
| loggedInUser = user; | |
| } | |
| } catch (e) { | |
| print(e); | |
| } | |
| } | |
| // void getMessages() async { | |
| // final messages = await _firestore.collection('messages').getDocuments(); | |
| // for (var message in messages.documents) { | |
| // print(message.data); | |
| // } | |
| // } | |
| // void messagesStream() async { | |
| // await for (var snapshot in _firestore.collection('messages').snapshots()) { | |
| // for (var message in snapshot.documents) { | |
| // print(message.data); | |
| // } | |
| // } | |
| // } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar( | |
| leading: null, | |
| actions: <Widget>[ | |
| IconButton( | |
| icon: Icon(Icons.close), | |
| onPressed: () { | |
| // messagesStream(); | |
| // getMessages(); | |
| // _auth.signOut(); | |
| // Navigator.pop(context); | |
| }), | |
| ], | |
title: Text(' Chat'), |
|
| backgroundColor: Colors.lightBlueAccent, | |
| ), | |
| body: SafeArea( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| crossAxisAlignment: CrossAxisAlignment.stretch, | |
| children: <Widget>[ | |
| MessageStream(), | |
| Container( | |
| decoration: kMessageContainerDecoration, | |
| child: Row( | |
| crossAxisAlignment: CrossAxisAlignment.center, | |
| children: <Widget>[ | |
| Expanded( | |
| child: TextField( | |
| controller: messageTextController, | |
| onChanged: (value) { | |
| messageText = value; | |
| }, | |
| decoration: kMessageTextFieldDecoration, | |
| ), | |
| ), | |
| FlatButton( | |
| onPressed: () { | |
| messageTextController.clear(); | |
| _firestore.collection('messages').add({ | |
| 'text': messageText, | |
| 'sender': loggedInUser.email, | |
| }); | |
| }, | |
| child: Text( | |
| 'Send', | |
| style: kSendButtonTextStyle, | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class MessageStream extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return StreamBuilder<QuerySnapshot>( | |
| stream: _firestore.collection('messages').snapshots(), | |
| builder: (context, snapshot) { | |
| if (!snapshot.hasData) { | |
| return Center( | |
| child: CircularProgressIndicator( | |
| backgroundColor: Colors.lightGreenAccent, | |
| ), | |
| ); | |
| } | |
| final messages = snapshot.data.documents; | |
| List<MessageBubble> messageBubbles = []; | |
| for (var message in messages) { | |
| final messageText = message.data['text']; | |
| final messageSender = message.data['sender']; | |
| final messageBubble = MessageBubble( | |
| sender: messageSender, | |
| text: messageText, | |
| ); | |
| messageBubbles.add(messageBubble); | |
| } | |
| return Expanded( | |
| child: ListView( | |
| padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20.0), | |
| children: messageBubbles, | |
| ), | |
| ); | |
| }, | |
| ); | |
| } | |
| } | |
| class MessageBubble extends StatelessWidget { | |
| MessageBubble({this.sender, this.text}); | |
| final String sender; | |
| final String text; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Padding( | |
| // 周りに空白 | |
| padding: EdgeInsets.all(10.0), | |
| child: Column( | |
| // 右に寄せる | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| children: <Widget>[ | |
| Text( | |
| sender, | |
| style: TextStyle( | |
| fontSize: 12.0, | |
| color: Colors.black54, | |
| ), | |
| ), | |
| Material( | |
| // 丸みをつける | |
| borderRadius: BorderRadius.circular(30.0), | |
| // 影をつける | |
| elevation: 5.0, | |
| color: Colors.lightBlueAccent, | |
| child: Padding( | |
| // メッセージの中に空白 | |
| padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), | |
| child: Text( | |
| text, | |
| style: TextStyle( | |
| color: Colors.white, | |
| fontSize: 15.0, | |
| ), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } |
by 
