Try the app out on Google Play if you want.<\/p><\/div>\n\n\n\n
First off all, install Flutter <\/a>if you haven’t, and create a new project in Visual Code by clicking CTRL+SHIFT+P to get the command field and then select Flutter: New Application Project<\/strong> in your folder where you keep your projects, I will name the project simplechatapp<\/strong>.<\/p>\n\n\n\n I usually create my Android emulators through Android Studio at the AVD manager so do that if you haven’t created one. If you got an emulator you can start it from Visual code, with Flutter: Launch Emulator.<\/strong> Let us now try the app so that it is working by running flutter run<\/strong> in the terminal. <\/p>\n\n\n\n Let us change the text default “Flutter Demo Home Page” to “SimpleChat” in main.dart<\/strong> then click R in the terminal to hot reload. While we are at it let us clear all the clutter with comments and the default created code to make it easier to work. Also delete the code for MyHomePage. <\/p>\n\n\n\n You can also run your application in your web browser (Chrome) by having Dart DevTools<\/strong> <\/a>installed and clicking F5 to start debugging. However, there is a lot of things that is not supported yet for the web sadly so you might stumble upon the “dart:method is not supported on dart4web” exception\/error so for this project we are going to stick with Android, although it shouldn’t be a problem debugging and testing with the web for now.<\/p>\n\n\n\n Okay so we are ready to do things! We have flutter all ready to go and with hot reload we can use to see our changes fast. Let us create a new stateless widget<\/strong> by typing stl<\/strong> and call it RoomsListPage<\/strong> and in it add a List <\/strong>variable along with a ListView.builder<\/strong> like this:<\/p>\n\n\n We now have a List <\/strong>that holds two items in the type of String<\/strong>. With the list we can work with our own defined object instead to make things more manageable so let us create a new class ChatRoom <\/strong>inside a new folder we call models<\/strong> under the lib folder.<\/p>\n\n\n\n Okay we’ve ChatRoom.dart<\/strong>, now let us set some properties for it. Keeping things simple we’ll just have an ID and Name.<\/p>\n\n\n We still have just Chat Room 1 and 2, but as we are using a constructor we can increase it with one so that we have chatroom starting from one and above. We’ll update the object initialization inside RoomsListPage <\/strong>so it is like this:<\/p>\n\n\n Much cleaner when we have classes we are working with. <\/p>\n\n\n\n Take a look at how a navigational menu can be added in Flutter here<\/a>. We are actually going to take some inspiration and take the code for the navigational menu (without the content) and it into our application right here. <\/p>\n\n\n\n We’ll add the package reference inside the pubspec.yaml first<\/p>\n\n\n Then we add the menu from the Creating a simple Bottom Navigation Bar in Flutter<\/a> post and also set RoomsListPage<\/strong>() inside the PageView<\/strong> so that is connected to the index 1. Now we have the chat rooms listed there under Chat Rooms.<\/p>\n\n\n\n <\/p>\n\n\n\n Let us now make it possible for the user to set the nickname under the first Profile page. It will be what we use as name when chatting in the chat rooms. Since we want this value to be set even when we close the app, let us utilize the shared preferences plugin <\/strong>for this! Basically what it does is saving the data into the users phone memory and thus we can access it when we start the app again. When the user reset the app data or uninstall the app then it will be destroyed. Add shared_preferences<\/strong> to your pubspec.yaml<\/strong>:<\/p>\n\n\n Okay we now have the ability to save into the phone. Let us add a stateful widget<\/strong> with the usual stful <\/strong>named ProfileInfo<\/strong>. Let us stay with the simple style and just add a plain form field with a button and leave it at that. You can obviously style this much more pretty, and do code factoring etc but that I’ll leave up to you :). Let me copy-paste the whole thing and describe from there what we are doing.<\/p>\n\n\n I believe it is easier to just have all the code at once in case you wanna copy-paste the whole thing instead of chopping everything up, but explanation can be useful for sure, so let me go through everything in detail what we just did:<\/p>\n\n\n\n With the TextEditingController <\/strong>object we can handle the value that is being inputted into the TextField<\/strong> Widget we also added. Since we defined the field as nicknameFieldController<\/strong> we will set the TextField controller property to nicknameFieldController<\/strong> to connect them.<\/p>\n\n\n\n We also have a initState() <\/strong>which is useful if we want to get the nickname we store in the SharedPreferences<\/strong>. What we need to remember is that we can not use the async keyword with initState which leads us to use the then <\/strong>method you see after SharedPreferences.GetInstance().<\/strong> What we are doing here is that we run the GetInstance()<\/a> which loads and parses the SharedPreferences for this app from disk then run the method GetString(“nickname”)<\/strong>, and if we get NULL here, it will be an empty string because of the two question marks we have there. Two question marks will take whatever is on the right side if the value (the returned value from the method) is NULL. <\/p>\n\n\n\n We can also set the value of the text <\/strong>property of nicknameFieldController<\/strong> so that the TextField <\/strong>won’t be just empty from the start which we do here from the previous retrieved value of the nickname field.<\/p>\n\n\n\n After that we will finally set a listener which is run whenever TextField is changed, what we do then is running the setNickname()<\/strong> method. The name should be quite self explanatory.<\/p>\n\n\n\n With our saveNickname() <\/strong>method we simply do the usual SharedPreferences getInstance()<\/strong> call and then we set the value for our nickname field which we do in the next method. This method is only called when we press the ElevatedButton<\/strong>.<\/p>\n\n\n setNickname() <\/strong>is called anytime we change the TextField <\/strong>since we have added a listener to our nicknameFieldController<\/strong>, and when that happens we set the nickname <\/strong>field. <\/p>\n\n\n\n There is a couple of things going on here but the most important thing is that we have now added a TextField <\/strong>Widget which uses our nicknameFieldController<\/strong> for controller, and below our TextField we have a Container Widget that contains an ElevatedButton<\/strong>, and this button have a onPressed function which we use to call on the saveNickname()<\/strong> function. At the same time we also display a SnackBar<\/strong>. We define a variable in the function that is of the SnackBar <\/strong>type which we set the content <\/strong>to be a “Updated username!” Text<\/strong> which we then pass to the ScaffoldMessenger <\/strong>showSnackBar function. <\/p>\n\n\n\n It’s time to go back and do something with our chat rooms! Let us make it possible to click on a chat room and enter it, we will need a new stateful widget and take use of the MaterialPageRoute<\/strong> to pass parameters.<\/p>\n\n\n\n We will first create a stateful widget<\/strong> called RoomPage<\/strong> that has a int id field<\/strong>, and we also have a constructor that takes in a (required) int id<\/strong> as a parameter. This id is going to represent our room ID.<\/p>\n\n\n Update the RoomList class <\/strong>as well<\/p>\n\n\n We are now utilizing the Navigator push<\/strong> function to transition into RoomPage<\/strong>, we also pass the room ID, or should I say index<\/strong>, from the list into the RoomPage <\/strong>constructor. Let us check out what we’ve done so far:<\/p>\n\n\n\n Great we can go into the room but nothing is there except it is showing what ID there is from the list. Let us load some messages into this! <\/p>\n\n\n\n There are tons of options our there to how to store data, but I like Firebase and it is pretty perfect to use Firestore in this case. Since Flutter is made by Google and they have Firebase made for mobile apps, so why not go Google all the way. Let us go to the firebase<\/a> console and add a project, I call mine SimpleChat<\/strong>.<\/p>\n\n\n\n Go to Firestore and create a database, I’ll select test for the rules, we can always change this later. Since I am European I’ll go with European firestore location. Then we should have an empty database! Great, let us add the firebase package firebase_core <\/strong>for Flutter, all of that documentation is here<\/a>. I’m going with the Null safety version here. We also need to add the cloud_firestore <\/strong>package.<\/p>\n\n\n\n Adding the package into the pubspec.yaml<\/strong><\/p>\n\n\n I’m doing this for Android<\/a>, you can choose other platforms too from the documentation!<\/p>\n\n\n\n Open up android\/build.gradle<\/strong> and add this under dependencies<\/strong>:<\/p>\n\n\n Then open up android\/app\/build.gradle<\/strong> and add this:<\/p>\n\n\n Then go to Project settings<\/strong> at Firebase under the configuration wheel icon and click on the Android icon and match it with your app information which you can find under simplechatapp\\android\\app\\src\\main\\AndroidManifest.xml<\/strong>.<\/p>\n\n\n\n Great we got the configuration down, let’s add the code that actually initialises Firebase with our .json file.<\/p>\n\n\n\n Since we are getting synchronous data from Firestore we must work with Futures. Let us take the sample code from the documentation so we have our MyApp <\/strong>look like this instead:<\/p>\n\n\n Now we are working with Futures, Asynchronous data, meaning, we will communicate with the Firebase Core API from our app and have a FutureBuilder <\/strong>which will be used when we get the data back. When the snapshot we get back has connectionState <\/strong>equals to ConnectionState.done<\/strong> then we can continue showing our normal MyHomePage <\/strong>Widget, otherwise print the error to the console with a blank white page. Also during load, show a Widget displaying the text Loading.<\/p>\n\n\n\n Let’s try it out. <\/p>\n\n\n I got the following error: <\/p>\n\n\n\n BUILD FAILED in 55s Solution was to go to your app build gradle file (at …\\simplechatapp\\android\\app\\build.gradle) and change minSdkversion <\/strong>from 16 to 21.<\/strong><\/p>\n\n\n\n You shouldn’t get any errors and it the app is now running as it should (on Android)! Now let us get Firestore in there, again we have all the documentation here<\/a>. Inside our our _RoomPageState<\/strong>, let us add a reference to Firestore like this (se code below), and remember to import the package so it appears at the top:<\/p>\n\n\n Create a class and save it under your Models folder <\/strong>called ChatMessage.dart <\/strong>that we will use for messages:<\/p>\n\n\n To keep parse time from Firestore we can use the intl <\/a>package. So install it with the pub add command so it appears in our pubspec.yaml<\/strong> file.<\/p>\n\n\n Then we need to add some UI, mainly a TextField<\/strong>, FloatingActionButton<\/strong> and a ListView<\/strong>, all inside a StreamBuilder<\/strong>. We can use the StreamBuilder <\/strong>because we can back a Stream <\/strong>from Firestore. I have taken inspiration and modified some of the code from freecodechamp<\/a> article that explains how to make a UI for a chat app, so thanks to them for the widget layout! Okay carrying, this is the code for the list that is coming from Firestore.<\/p>\n\n\n\n Modifying the _RoomPageState <\/strong>class inside main.dart<\/strong> it now looks like this:<\/p>\n\n\n Let us go through the things we added.<\/p>\n\n\n\n Like stated in the title, we use the TextEditingController<\/strong> to have control over the TextField . That TextField<\/strong> is for the text chat input. <\/strong>With this controller set to the TextField<\/strong> we can easily access the text <\/strong>property to blank out the TextField <\/strong>when the user sent a message. We also define the FirebaseFirestore instance <\/strong>here so we can access all the Firestore collections and documents from our Firebase <\/strong>account.<\/p>\n\n\n\n In the initState() <\/strong>function we can set the nickname from the SharedPreferences (which the user sets in the HomePage()<\/strong>, we use this field when we send message. We also set the roomname here to display it in the AppBar<\/strong>.<\/p>\n\n\n\n We create this function to take in a timestamp from Firestore and convert it into a DateTime <\/strong>object which we later can use to format it into a String<\/strong>. You’d think Firestore handle your DateTime <\/strong>(using DateTime.now() gives you a DateTime<\/a> object) as a Date of some sort, but what happens is that it will be stored as a Timestamp value in Firestore, thus we handle those values with this function. <\/p>\n\n\n\n I would say that here is where the fun starts! We are now retrieving data from our Firestore collections inside the chatrooms <\/strong>document. We will first make a reference to or collection using our id Field (the room ID), then we will make another Field called snapStream<\/strong>. With the snapStream we will make a query on our previous reference to get messages in a descending order by the date property. We also have a map function so that we can go through the documents we retrieved and create ChatMessage <\/strong>objects from it. We could of course do it without mapping, but doing so gives us a lot of more control and structure, now we can use intellisense accessing our properties and so forth.<\/p>\n\n\n\n addMessage() <\/strong>is simply adding a json object to the messageCollection<\/strong>. This could be refined even more of course working with a ChatMessage <\/strong>object, but we don’t have all day… Then <\/strong>after this is done we will reset the text chat TextField <\/strong>to an empty String<\/strong>.<\/p>\n\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/image-11.png\")
<\/figure>\n\n\n\n\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'FileIdea Chat',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n visualDensity: VisualDensity.adaptivePlatformDensity,\n ),\n home: Material(child: RoomsListPage()),\n );\n }\n}\n\nclass RoomsListPage extends StatelessWidget {\n final List<String> items =\n List<String>.generate(2, (index) => "Chat Room $index");\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index]}'),\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n\n<\/pre><\/div>\n\n\n![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/image-12.png\")
<\/figure>\n\n\n\n\nclass ChatRoom {\n int id;\n String name;\n\n ChatRoom(id) {\n this.id = id;\n this.name = "Chat room " + (id + 1).toString();\n }\n}\n\n<\/pre><\/div>\n\n\n\nclass RoomsListPage extends StatelessWidget {\n RoomsListPage({Key key}) : super(key: key);\n final List<ChatRoom> items =\n List<ChatRoom>.generate(2, (index) => new ChatRoom(index));\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index].name}'),\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n\n<\/pre><\/div>\n\n\nAdd a navigational menu<\/h2>\n\n\n\n
\nname: simplechatapp\ndescription: A new Flutter project.\n\npublish_to: 'none'\nversion: 1.0.0+1\n\nenvironment:\n sdk: ">=2.12.0 <3.0.0"\n\ndependencies:\n flutter:\n sdk: flutter\n bottom_navy_bar: ^6.0.0\n\n cupertino_icons: ^1.0.2\n gallery_view: ^0.0.4\n\ndev_dependencies:\n flutter_test:\n sdk: flutter\n pedantic: ^1.10.0\n\nflutter:\n\n uses-material-design: true\n\n<\/pre><\/div>\n\n\n
![\"Simple](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/AnimationChat.gif\")
<\/figure>\n\n\n\nAdd a textfield for the nickname<\/h2>\n\n\n\n
\nname: simplechatapp\ndescription: A new Flutter project.\n\npublish_to: 'none'\nversion: 1.0.0+1\n\nenvironment:\n sdk: ">=2.12.0 <3.0.0"\n\ndependencies:\n flutter:\n sdk: flutter\n bottom_navy_bar: ^6.0.0\n cupertino_icons: ^1.0.2\n shared_preferences: ^2.0.5\n\ndev_dependencies:\n flutter_test:\n sdk: flutter\n pedantic: ^1.10.0\n\nflutter:\n\n uses-material-design: true\n\n<\/pre><\/div>\n\n\n
\nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:flutter\/material.dart';\nimport 'package:shared_preferences\/shared_preferences.dart';\nimport 'package:simplechatapp\/models\/ChatRoom.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'FileIdea Chat',\n home: MyHomePage(),\n );\n }\n}\n\nclass ProfileInfo extends StatefulWidget {\n @override\n _ProfileInfoState createState() => _ProfileInfoState();\n}\n\nclass _ProfileInfoState extends State<ProfileInfo> {\n final nicknameFieldController = TextEditingController();\n String nickname = "";\n @override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n nicknameFieldController.text = nickname;\n })\n });\n\n nicknameFieldController.addListener(() {\n setNickname();\n });\n }\n\n void saveNickname() async {\n final prefs = await SharedPreferences.getInstance();\n prefs.setString('nickname', nickname);\n }\n\n setNickname() async {\n setState(() {\n nickname = nicknameFieldController.text;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n body: Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n children: <Widget>[\n Text("Nickname: $nickname"),\n TextField(\n enabled: true,\n controller: nicknameFieldController,\n ),\n Container(\n margin: const EdgeInsets.only(top: 20.0),\n child: ElevatedButton(\n onPressed: () {\n saveNickname();\n final snackBar = SnackBar(\n content: Text('Updated username!'),\n );\n ScaffoldMessenger.of(context).showSnackBar(snackBar);\n },\n child: Text('Update'),\n ))\n ],\n ),\n ),\n );\n }\n}\n\nclass RoomsListPage extends StatelessWidget {\n RoomsListPage({Key? key}) : super(key: key);\n final List<ChatRoom> items =\n List<ChatRoom>.generate(2, (index) => new ChatRoom(index));\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index].name}'),\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n late PageController _pageController;\n\n @override\n void initState() {\n super.initState();\n _pageController = PageController();\n }\n\n @override\n void dispose() {\n _pageController.dispose();\n super.dispose();\n }\n\n int _currentIndex = 0;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text("FileIdea Chat")),\n body: SizedBox.expand(\n child: PageView(\n controller: _pageController,\n onPageChanged: (index) {\n setState(() => _currentIndex = index);\n },\n children: <Widget>[\n ProfileInfo(),\n RoomsListPage(),\n ],\n ),\n ),\n bottomNavigationBar: BottomNavyBar(\n selectedIndex: _currentIndex,\n showElevation: true,\n itemCornerRadius: 50,\n mainAxisAlignment: MainAxisAlignment.center,\n curve: Curves.easeIn,\n onItemSelected: (index) => {\n setState(() => _currentIndex = index),\n _pageController.jumpToPage(index)\n },\n items: <BottomNavyBarItem>[\n BottomNavyBarItem(\n icon: Icon(Icons.people),\n title: Text('Profile'),\n activeColor: Colors.purpleAccent,\n textAlign: TextAlign.center,\n ),\n BottomNavyBarItem(\n icon: Icon(Icons.message),\n title: Text(\n 'Chat Rooms',\n ),\n activeColor: Colors.pink,\n textAlign: TextAlign.center,\n ),\n ],\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\n![\"Adding](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/image-17.png\")
<\/figure>\n\n\n\nUsing TextEditingController for a TextField<\/h3>\n\n\n
\n final nicknameFieldController = TextEditingController();\n<\/pre><\/div>\n\n\n
initState with SharedPreferences<\/h3>\n\n\n
\n @override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n nicknameFieldController.text = nickname;\n })\n });\n\n nicknameFieldController.addListener(() {\n setNickname();\n });\n }\n<\/pre><\/div>\n\n\nSaving the nickname from the TextField<\/h3>\n\n\n
\n void saveNickname() async {\n final prefs = await SharedPreferences.getInstance();\n prefs.setString('nickname', nickname);\n }\n<\/pre><\/div>\n\n\n\n setNickname() async {\n setState(() {\n nickname = nicknameFieldController.text;\n });\n }\n<\/pre><\/div>\n\n\nThe Build function with a TextField, ElevatedButton and a snackBar<\/h3>\n\n\n
\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n body: Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n children: <Widget>[\n Text("Nickname: $nickname"),\n TextField(\n enabled: true,\n controller: nicknameFieldController,\n ),\n Container(\n margin: const EdgeInsets.only(top: 20.0),\n child: ElevatedButton(\n onPressed: () {\n saveNickname();\n final snackBar = SnackBar(\n content: Text('Updated username!'),\n );\n ScaffoldMessenger.of(context).showSnackBar(snackBar);\n },\n child: Text('Update'),\n ))\n ],\n ),\n ),\n );\n }\n<\/pre><\/div>\n\n\nEnter Chat room <\/h2>\n\n\n\n
\nclass RoomPage extends StatefulWidget {\n RoomPage({Key? key, required this.id}) : super(key: key);\n final int id;\n @override\n _RoomPageState createState() => _RoomPageState();\n}\n\nclass _RoomPageState extends State<RoomPage> {\n @override\n Widget build(BuildContext context) {\n return Container(child: Text(widget.id.toString()));\n }\n}\n<\/pre><\/div>\n\n\n\nclass RoomsListPage extends StatelessWidget {\n RoomsListPage({Key? key}) : super(key: key);\n final List<ChatRoom> items =\n List<ChatRoom>.generate(2, (index) => new ChatRoom(index));\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index].name}'),\n onTap: () {\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => RoomPage(id: index)),\n );\n },\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n<\/pre><\/div>\n\n\n![\"Showing](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/FileIdeaChatProgress.gif\")
<\/figure>\n\n\n\nGet messages into the chat room<\/h3>\n\n\n\n
![\"Viewing](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/image-18-1024x249.png\")
<\/figure>\n\n\n\n\nname: simplechatapp\ndescription: A new Flutter project.\n\npublish_to: 'none'\nversion: 1.0.0+1\n\nenvironment:\n sdk: ">=2.12.0 <3.0.0"\n\ndependencies:\n flutter:\n sdk: flutter\n bottom_navy_bar: ^6.0.0\n cupertino_icons: ^1.0.2\n shared_preferences: ^2.0.5\n firebase_core: "^1.0.4"\n cloud_firestore: "^1.0.6"\n\ndev_dependencies:\n flutter_test:\n sdk: flutter\n pedantic: ^1.10.0\n\nflutter:\n\n uses-material-design: true\n\n<\/pre><\/div>\n\n\n
\n classpath 'com.google.gms:google-services:4.3.3'\n<\/pre><\/div>\n\n\n
\napply plugin: 'com.google.gms.google-services'\n<\/pre><\/div>\n\n\n
![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/image-19.png\")
<\/figure>\n\n\n\n\nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:firebase_core\/firebase_core.dart';\nimport 'package:flutter\/material.dart';\nimport 'package:shared_preferences\/shared_preferences.dart';\nimport 'package:simplechatapp\/models\/ChatRoom.dart';\n\nvoid main() {\n WidgetsFlutterBinding.ensureInitialized();\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n \/\/ Create the initialization Future outside of `build`:\n final Future<FirebaseApp> _initialization = Firebase.initializeApp();\n\n @override\n Widget build(BuildContext context) {\n return FutureBuilder(\n \/\/ Initialize FlutterFire:\n future: _initialization,\n builder: (context, snapshot) {\n \/\/ Check for errors\n if (snapshot.hasError) {\n print(snapshot.toString());\n\n return MaterialApp(\n home: Container(\n color: Colors.white,\n child: Text("error"),\n ));\n }\n\n \/\/ Once complete, show your application\n if (snapshot.connectionState == ConnectionState.done) {\n return MaterialApp(home: MyHomePage());\n }\n\n \/\/ Otherwise, show something whilst waiting for initialization to complete\n return MaterialApp(\n home: Container(\n color: Colors.white,\n child: Text("Loading"),\n ));\n },\n );\n }\n}\n\nclass ProfileInfo extends StatefulWidget {\n @override\n _ProfileInfoState createState() => _ProfileInfoState();\n}\n\nclass _ProfileInfoState extends State<ProfileInfo> {\n final nicknameFieldController = TextEditingController();\n String nickname = "";\n @override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n nicknameFieldController.text = nickname;\n })\n });\n\n nicknameFieldController.addListener(() {\n setNickname();\n });\n }\n\n void saveNickname() async {\n final prefs = await SharedPreferences.getInstance();\n prefs.setString('nickname', nickname);\n }\n\n setNickname() async {\n setState(() {\n nickname = nicknameFieldController.text;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n body: Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n children: <Widget>[\n Text("Nickname: $nickname"),\n TextField(\n enabled: true,\n controller: nicknameFieldController,\n ),\n Container(\n margin: const EdgeInsets.only(top: 20.0),\n child: ElevatedButton(\n onPressed: () {\n saveNickname();\n final snackBar = SnackBar(\n content: Text('Updated username!'),\n );\n ScaffoldMessenger.of(context).showSnackBar(snackBar);\n },\n child: Text('Update'),\n ))\n ],\n ),\n ),\n );\n }\n}\n\nclass RoomPage extends StatefulWidget {\n RoomPage({Key? key, required this.id}) : super(key: key);\n final int id;\n @override\n _RoomPageState createState() => _RoomPageState();\n}\n\nclass _RoomPageState extends State<RoomPage> {\n @override\n Widget build(BuildContext context) {\n return Container(child: Text(widget.id.toString()));\n }\n}\n\nclass RoomsListPage extends StatelessWidget {\n RoomsListPage({Key? key}) : super(key: key);\n final List<ChatRoom> items =\n List<ChatRoom>.generate(2, (index) => new ChatRoom(index));\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index].name}'),\n onTap: () {\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => RoomPage(id: index)),\n );\n },\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n late PageController _pageController;\n\n @override\n void initState() {\n super.initState();\n _pageController = PageController();\n }\n\n @override\n void dispose() {\n _pageController.dispose();\n super.dispose();\n }\n\n int _currentIndex = 0;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text("FileIdea Chat")),\n body: SizedBox.expand(\n child: PageView(\n controller: _pageController,\n onPageChanged: (index) {\n setState(() => _currentIndex = index);\n },\n children: <Widget>[\n ProfileInfo(),\n RoomsListPage(),\n ],\n ),\n ),\n bottomNavigationBar: BottomNavyBar(\n selectedIndex: _currentIndex,\n showElevation: true,\n itemCornerRadius: 50,\n mainAxisAlignment: MainAxisAlignment.center,\n curve: Curves.easeIn,\n onItemSelected: (index) => {\n setState(() => _currentIndex = index),\n _pageController.jumpToPage(index)\n },\n items: <BottomNavyBarItem>[\n BottomNavyBarItem(\n icon: Icon(Icons.people),\n title: Text('Profile'),\n activeColor: Colors.purpleAccent,\n textAlign: TextAlign.center,\n ),\n BottomNavyBarItem(\n icon: Icon(Icons.message),\n title: Text(\n 'Chat Rooms',\n ),\n activeColor: Colors.pink,\n textAlign: TextAlign.center,\n ),\n ],\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\n\nflutter run\n<\/pre><\/div>\n\n\n
Running Gradle task ‘assembleDebug’\u2026
Running Gradle task ‘assembleDebug’\u2026 Done 56.5s
[!] The shrinker may have failed to optimize the Java bytecode.
To disable the shrinker, pass the --no-shrink<\/code> flag to this command.
To learn more, see: https:\/\/developer.android.com\/studio\/build\/shrink-code
Exception: Gradle task assembleDebug failed with exit code 1<\/strong><\/p>\n\n\n\n\nFirebaseFirestore firestore = FirebaseFirestore.instance;\n<\/pre><\/div>\n\n\n
\nclass ChatMessage {\n String message = "";\n String type = "";\n DateTime date = new DateTime.now();\n\n ChatMessage(message, type) {\n this.message = message;\n this.type = type;\n date = DateTime.now();\n }\n}\n<\/pre><\/div>\n\n\n\nflutter pub add intl\n<\/pre><\/div>\n\n\n
\nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:cloud_firestore\/cloud_firestore.dart';\nimport 'package:firebase_core\/firebase_core.dart';\nimport 'package:flutter\/material.dart';\nimport 'package:intl\/intl.dart';\nimport 'package:shared_preferences\/shared_preferences.dart';\nimport 'package:simplechatapp\/models\/ChatRoom.dart';\n\nimport 'models\/ChatMessage.dart';\n\nvoid main() {\n WidgetsFlutterBinding.ensureInitialized();\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n \/\/ Create the initialization Future outside of `build`:\n final Future<FirebaseApp> _initialization = Firebase.initializeApp();\n\n @override\n Widget build(BuildContext context) {\n return FutureBuilder(\n \/\/ Initialize FlutterFire:\n future: _initialization,\n builder: (context, snapshot) {\n \/\/ Check for errors\n if (snapshot.hasError) {\n return MaterialApp(\n home: Container(\n color: Colors.white,\n child: Text("error"),\n ));\n }\n\n \/\/ Once complete, show your application\n if (snapshot.connectionState == ConnectionState.done) {\n return MaterialApp(home: MyHomePage());\n }\n\n \/\/ Otherwise, show something whilst waiting for initialization to complete\n return MaterialApp(\n home: Container(\n color: Colors.white,\n child: Text("Loading"),\n ));\n },\n );\n }\n}\n\nclass ProfileInfo extends StatefulWidget {\n @override\n _ProfileInfoState createState() => _ProfileInfoState();\n}\n\nclass _ProfileInfoState extends State<ProfileInfo> {\n final nicknameFieldController = TextEditingController();\n String nickname = "";\n @override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n nicknameFieldController.text = nickname;\n })\n });\n\n nicknameFieldController.addListener(() {\n setNickname();\n });\n }\n\n void saveNickname() async {\n final prefs = await SharedPreferences.getInstance();\n prefs.setString('nickname', nickname);\n }\n\n setNickname() async {\n setState(() {\n nickname = nicknameFieldController.text;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n body: Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n children: <Widget>[\n Text("Nickname: $nickname"),\n TextField(\n enabled: true,\n controller: nicknameFieldController,\n ),\n Container(\n margin: const EdgeInsets.only(top: 20.0),\n child: ElevatedButton(\n onPressed: () {\n saveNickname();\n final snackBar = SnackBar(\n content: Text('Updated username!'),\n );\n ScaffoldMessenger.of(context).showSnackBar(snackBar);\n },\n child: Text('Update'),\n ))\n ],\n ),\n ),\n );\n }\n}\n\nclass RoomPage extends StatefulWidget {\n RoomPage({Key? key, required this.id}) : super(key: key);\n final int id;\n @override\n _RoomPageState createState() => _RoomPageState();\n}\n\nclass _RoomPageState extends State<RoomPage> {\n late String message = "";\n late String nickname = "";\n late String roomname = "";\n\n FirebaseFirestore firestore = FirebaseFirestore.instance;\n final TextEditingController _chatMessageController = TextEditingController();\n\n @override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n })\n });\n roomname = "Chat room " + (widget.id + 1).toString();\n }\n\n setMessage() async {\n setState(() {\n message = this._chatMessageController.text;\n });\n }\n\n DateTime readTimeStamp(dynamic date) {\n Timestamp timestamp = date;\n return timestamp.toDate();\n }\n\n @override\n Widget build(BuildContext context) {\n TextEditingController messageController = TextEditingController();\n CollectionReference messagesCollection = FirebaseFirestore.instance\n .collection("chatrooms")\n .doc(widget.id.toString())\n .collection("messages");\n\n final snapStream = messagesCollection\n .orderBy('date', descending: true)\n .limit(100)\n .snapshots()\n .map((obj) => obj.docs\n .map((e) => new ChatMessage(\n e.data()['message'],\n e.data()['nickname'].toString(),\n readTimeStamp(e.data()['date'])))\n .toList());\n\n Future<void> addMessage() {\n return messagesCollection.add({\n 'message': this.message,\n "nickname": this.nickname,\n "date": DateTime.now()\n }).then((value) => messageController.text = "");\n }\n\n return StreamBuilder<List<ChatMessage>>(\n stream: snapStream,\n builder: (BuildContext context, snapshot) {\n if (snapshot.hasError) {\n return Text('Something went wrong');\n }\n\n if (snapshot.connectionState == ConnectionState.waiting) {\n return DisplayLoading();\n }\n\n return Scaffold(\n appBar: AppBar(title: Text(this.roomname)),\n body: Stack(\n children: <Widget>[\n Align(\n child: ListView.builder(\n itemCount: (snapshot.data as List<ChatMessage>).length,\n shrinkWrap: true,\n reverse: true,\n physics: AlwaysScrollableScrollPhysics(),\n padding: EdgeInsets.only(top: 10, bottom: 80),\n itemBuilder: (context, index) {\n final messageData =\n (snapshot.data as List<ChatMessage>)[index];\n final bool isMe = messageData.nickname == nickname;\n final String messenger = messageData.nickname;\n late String timeformat = DateFormat('yyyy-MM-dd \u2013 kk:mm')\n .format(messageData.date);\n\n late String message = messageData.message;\n\n if (!isMe) {\n message = messenger + ': ' + message;\n }\n\n return Container(\n padding: EdgeInsets.only(\n left: 14, right: 14, top: 10, bottom: 10),\n child: Align(\n alignment:\n (!isMe ? Alignment.topLeft : Alignment.topRight),\n child: Stack(children: [\n GestureDetector(\n onTap: () => {},\n child: Container(\n decoration: BoxDecoration(\n borderRadius: BorderRadius.circular(20),\n color: (!isMe\n ? Colors.grey.shade200\n : Colors.blue[400]),\n ),\n padding: EdgeInsets.all(16),\n child: RichText(\n text: TextSpan(\n style: TextStyle(\n fontSize: 11,\n color: !isMe\n ? Colors.black87\n : Colors.white),\n text: '$timeformat\\n',\n children: [\n TextSpan(\n style: TextStyle(\n fontWeight: FontWeight.bold,\n fontSize: 15,\n color: !isMe\n ? Colors.black87\n : Colors.white),\n text: message,\n ),\n ],\n ),\n ),\n ))\n ]),\n ),\n );\n },\n ),\n ),\n Align(\n alignment: Alignment.bottomLeft,\n child: Container(\n padding: EdgeInsets.only(left: 10, bottom: 10, top: 10),\n height: 60,\n width: double.infinity,\n color: Colors.white,\n child: Row(\n children: <Widget>[\n SizedBox(\n width: 15,\n ),\n Expanded(\n child: TextField(\n controller: messageController,\n onChanged: (str) => {this.message = str},\n decoration: InputDecoration(\n hintText: "Write message...",\n hintStyle: TextStyle(color: Colors.black54),\n border: InputBorder.none),\n ),\n ),\n SizedBox(\n width: 15,\n ),\n FloatingActionButton(\n onPressed: addMessage,\n child: Icon(\n Icons.send,\n color: Colors.white,\n size: 18,\n ),\n backgroundColor: Colors.blue,\n elevation: 0,\n ),\n ],\n ),\n ),\n ),\n ],\n ),\n );\n },\n );\n }\n}\n\nclass DisplayLoading extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Material(\n child: Center(child: Text("Loading...")),\n );\n }\n}\n\nclass RoomsListPage extends StatelessWidget {\n RoomsListPage({Key? key}) : super(key: key);\n final List<ChatRoom> items =\n List<ChatRoom>.generate(2, (index) => new ChatRoom(index));\n\n @override\n Widget build(BuildContext context) {\n return ListView.builder(\n itemCount: items.length,\n itemBuilder: (context, index) {\n return new ListTile(\n title: new Text('${items[index].name}'),\n onTap: () {\n Navigator.push(\n context,\n MaterialPageRoute(builder: (context) => RoomPage(id: index)),\n );\n },\n contentPadding: EdgeInsets.symmetric(horizontal: 26.0),\n );\n },\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n late PageController _pageController;\n\n @override\n void initState() {\n super.initState();\n _pageController = PageController();\n }\n\n @override\n void dispose() {\n _pageController.dispose();\n super.dispose();\n }\n\n int _currentIndex = 0;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text("Simple Chat")),\n body: SizedBox.expand(\n child: PageView(\n controller: _pageController,\n onPageChanged: (index) {\n setState(() => _currentIndex = index);\n },\n children: <Widget>[\n ProfileInfo(),\n RoomsListPage(),\n ],\n ),\n ),\n bottomNavigationBar: BottomNavyBar(\n selectedIndex: _currentIndex,\n showElevation: true,\n itemCornerRadius: 50,\n mainAxisAlignment: MainAxisAlignment.center,\n curve: Curves.easeIn,\n onItemSelected: (index) => {\n setState(() => _currentIndex = index),\n _pageController.jumpToPage(index)\n },\n items: <BottomNavyBarItem>[\n BottomNavyBarItem(\n icon: Icon(Icons.people),\n title: Text('Profile'),\n activeColor: Colors.purpleAccent,\n textAlign: TextAlign.center,\n ),\n BottomNavyBarItem(\n icon: Icon(Icons.message),\n title: Text(\n 'Chat Rooms',\n ),\n activeColor: Colors.pink,\n textAlign: TextAlign.center,\n ),\n ],\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\n![\"Showing](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/04\/FileIdeaChaDone.gif\")
<\/figure>\n\n\n\nTextEditingController for the TextField<\/h3>\n\n\n
\n late String message = "";\n late String nickname = "";\n late String roomname = "";\n\n FirebaseFirestore firestore = FirebaseFirestore.instance;\n final TextEditingController _chatMessageController = TextEditingController();\n\n<\/pre><\/div>\n\n\n
initState<\/h3>\n\n\n
\n@override\n void initState() {\n super.initState();\n\n SharedPreferences.getInstance().then((prefValue) => {\n setState(() {\n nickname = prefValue.getString('nickname') ?? "";\n })\n });\n roomname = "Chat room " + (widget.id + 1).toString();\n }\n<\/pre><\/div>\n\n\nreadTimeStamp<\/h3>\n\n\n
\n DateTime readTimeStamp(dynamic date) {\n Timestamp timestamp = date;\n return timestamp.toDate();\n }\n<\/pre><\/div>\n\n\nGet Firestore data from collections<\/h3>\n\n\n
\n@override\n Widget build(BuildContext context) {\n TextEditingController messageController = TextEditingController();\n CollectionReference messagesCollection = FirebaseFirestore.instance\n .collection("chatrooms")\n .doc(widget.id.toString())\n .collection("messages");\n\n final snapStream = messagesCollection\n .orderBy('date', descending: true)\n .limit(100)\n .snapshots()\n .map((obj) => obj.docs\n .map((e) => new ChatMessage(\n e.data()['message'],\n e.data()['nickname'].toString(),\n readTimeStamp(e.data()['date'])))\n .toList());\n\n Future<void> addMessage() {\n return messagesCollection.add({\n 'message': this.message,\n "nickname": this.nickname,\n "date": DateTime.now()\n }).then((value) => messageController.text = "");\n }\n<\/pre><\/div>\n\n\nStreamBuilder<\/h3>\n\n\n