DEV Community: mukhtharcm

Deleting a Firestore Document in Flutter

mukhtharcm — Fri, 20 Aug 2021 22:30:00 +0000

There is no need for a huge story here. Deleting a Firestore document is a straightforward thing.

We just have to point to a doc and call delete on it.

final _db = FirebaseFirestore.instance;
await _db.collection("notes").doc("note1").delete();

That’s it.

The pointed document will be deleted by the above function.

Update Firestore Document Flutter

mukhtharcm — Thu, 19 Aug 2021 22:30:00 +0000

Updating documents in Firestore is pretty easy.

One method is to use the update function available in Firestore Library.

Update Method

Let’s look at an example by using the NoteModel class we created in Adding Data to Firestore article

final _db = FirebaseFirestore.instance;
NoteModel noteToUpdate = NoteModel(
title:"This is an Awesome Title",
content:"This is the Content of the Note",
);
await _db.collection("notes").doc("doc-id").update(noteToUpdate.toMap());

The above function will update the document with the document id we passed with the new data.

The One thing we should consider here is that, if there is no document existing with the document Id we provided, our Update will Fail.

This brings us to the second option.

Set Method

As I have pointed out in the article about adding data to Firestore, set function can be used to Add document with a custom Id to Firestore Collections.

It is also useful for updating a document. For that we have to pass merge:true into setOptions.

If we didn’t pass the merge:true, the older document will be completely overwritten. But if we did this, the document will only update with new Data.

And this method will create a new document if no other document exists with the given document Id.

final _db = FirebaseFirestore.instance;
NoteModel noteToUpdate = NoteModel(
title:"This is an Awesome Title",
content:"This is the Content of the Note",
);
await _db.collection("notes").doc("doc-id").set(
noteToUpdate.toMap(),
SetOptions(
merge: true,
),
);

The above code will update a document if it exists and will create a new document if it exists.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Adding Dart Objects to Firestore in Flutter

mukhtharcm — Wed, 18 Aug 2021 22:30:00 +0000

I had previously written an article on How to Load Data from Firestore into a ListView.

Add To Firestore with Automatic Id

In this article, we’ll learn How to add Data into a Firestore Collection without Using the Firebase Console UI.

It is quite simple. There is a function to add a document to a Collection in the Firestore Library. We can pass a Map to it and we are done.

Here’s an example.

FirebaseFirestore.instance.collection("collection-name").add({
"title":"This is the value for Title",
"content":"This is the Content"
});

But as told in my Latest post on Firestore listview, we can convert Firestore data into Dart Objects and Vice-versa.

Convert Dart Object to Map

For that, let’s create a Model class Like the previous Post.

class NoteModel{
String title;
String content;
NoteModel({
required this.title,
required this.content,
});
}

Next, we have to create a Function that Will convert this Object into a Map.

Map<String,dynamic> toMap(){
return {
"title":title,
"content":content,
};
}

Put the above Function Inside our Model Class and It’ll convert our Dart Object into a Map.

Adding to Firestore

With the second method, we can add Data to Firestore simply.

First, create An Instance of our Notes Class.

NoteModel noteToAdd = NoteModel(
title:"This is an Awesome Title",
content:"This is the Content of the Note",
);

Next, we can simply add the above note to Firestore.

NoteModel noteToAdd = NoteModel(
title:"This is an Awesome Title",
content:"This is the Content of the Note",
);
FirebaseFirestore.instance.collection("Notes").add(noteToAdd.toMap());

Add to Firestore With Custom Id

All the above methods will create an Automatic document Id for the document we add. But If we want to provide a custom Id for a document, we can do it easily.

NoteModel noteToAdd = NoteModel(
title:"This is an Awesome Title",
content:"This is the Content of the Note",
);
FirebaseFirestore.collection("notes").
doc("your-desired-doc-id").
set(noteModel.toMap());

The above code will create a document with the Id we provided.

Please Note when we use set, if there exists a document with the Same Id, It’ll be overwritten by the latest One.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Flutter Listview From Firestore using Dart Objects

mukhtharcm — Tue, 17 Aug 2021 22:30:00 +0000

Firebase and Flutter are like a match made in heaven. They both work well together very amazingly.

In a previous article, I have shown you how to create a Flutter ListView from Firestore.

That was by extracting the information we need directly from the data property like this.

doc.data()["title"]

In this article, we are gonna learn how to change those data into an actual Dart Object and use that in our listView Instead.

Create Model File

First of all, we have to create a model dart file. In that file, create a class for our Note Object.

class NoteModel{
String title;
String content;
NoteModel({
required this.title,
required this.content,
});
}

Now we are going to create a function that will convert our Firestore Docs into the Dart Object we created above.

Our Notes Collection in Firestore

Factory for Converting Firestore Docs to Dart Objects

For this, we need to write a factory function. Don’t fear, this is just a fancy name for a function that will return an instance of a Class.

In the same dart class, create let’s create our Factory.

factory NoteModel.fromDocumentSnapshot({required DocumentSnapshot<Map<String,dynamic>> doc}){
return NoteModel(
title: doc.data()!["title"],
content:doc.data()!["content"],
);
}

The above Function will accept a DocumentSnapshot (A Firestore Document) and turn it into a NoteModel.

Streaming our Notes from Firstore

Next, on the page which we’ll show the data, let’s create a Function to get all those Notes from Firestore.

final _db = FirebaseFirestore.instance;
Stream<List<NoteModel>> noteStream(){
try{
return
_db.collection("notes)
.snapshots
.map((notes){
final List<NoteModel> notesFromFirestore = <NoteModel>[];
for(final DocumentSnapshot<Map<String,dynamic>> doc in notes.docs){
notesFromFirestore.add(NoteModel.fromDocumentSnapshot(doc:doc));
}
return notesFromFirestore;
});
} catch(e){
rethrow;
}
}

The above function will stream Notes from our Firestore Collection.

Showing The Data

For showing the Notes, we will use StreamBuilder as we have previously done.

StreamBuilder<List<NoteModel>>(
stream: noteStream();
builder: (context,snapshot){
if(!snapshot.hasData){
return Center(
child:Text("No Data");
)
} else if(snapshot.hasError){
return Center(
child: Text("An Error Occured);
)
} else if(snapshot.hasData){
return ListView.Builder(
itemCount: snapshot.data!.index,
itemBuilder: (context,index){
NoteModel currentModel = snapshot.data![index];
return Card(
child: ListTile(
title: Text(currentNote .title)
subtitle:Text(currentModel.content)
)
);
}
)
}
else return Center(child: Text("An Error occured));
}
)

The above code will bring a list View from those Firestore Data. Please notice that We are directly accessing the Dart Objects properties instead of accessing .data directly.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Disabling Touch Events in Flutter

mukhtharcm — Mon, 16 Aug 2021 22:30:00 +0000

At some point in our app, we have a requirement to disable touch inputs. The one immediate use case coming into my mind is the loading time after Submitting Forms.

Whatever may be our use-case, Flutter has widgets (😄) for this too. Specifically, there are 2 widgets for this use case.

AbsorbPointer Widget

The first one is the AbsorbPointer Widget. What we have to do is to wrap the widget we want to disable touch with this Widget.

This widget has a property called absorbing. If this is set to true, the touch will be disabled for the child widgets.

If it is false, the widgets will behave normally.

AbsorbPointer(
absorbing: true,
child: MaterialButton(
child: Text("Click Me"),
onPressed: () {
// nothing :)
 },
color: Colors.purple,
),
)

The Above is an example of a disabled Button. We can’t click on the Button while absorbing is set to true.

IgnorePointer Widget

The next one is IgnorePointer Widget. The only noticeable difference with the first one is the change in name of the widget and the property which controls the Touch Status.

Here also, we have to wrap the widget we want to disable touch with this widget.

In this widget, the property which controls touch is ignoring.

Like the first one, if we set ignoring to true, we can’t click the underlying widgets. If it’s false it’ll behave normally.

IgnorePointer(
ignoring: true,
child: MaterialButton(
child: Text("Click Me"),
onPressed: () {
// nothing :)
 },
color: Colors.purple,
),
)

This is the same example with IgnorePointer Widget. We have to change ignoring to false if we want to click the Button.

Ideas

In Both of these scenarios, an ideal way would be to don’t hard code the values for ignoring and absorbing.

Instead, we can use a variable and control them from outside.

bool ignoring = true; // A global Variable

// Inside A Column
IgnorePointer(
ignoring: ignoring,
child: MaterialButton(
child: Text("Click the below button to toggle status"),
onPressed: () {
ignoring = !ignoring
},
color: Colors.purple,
),
),
MaterialButton(
child: Text("Click Me to Toggle my Status"),
onPressed: () {
ignoring = !ignoring
},
color: Colors.purple,
),

In the above example, Clicking the below button will toggle the touch status of the above Button.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Change Logo in Flutter Android Application

mukhtharcm — Sun, 15 Aug 2021 23:00:00 +0000

Intro

The Default Logo of a Flutter application is the Flutter Logo. I don’t think most applications will not be sufficient with this Logo.

There are many ways to change this default Logo. This includes using packages like Flutter Launcher Icons or using the built-in Image Asset Studio in the Android Studio.

But the First method needs to install a package and the second method needs us to use Android Studio. If you are like me, who doesn’t use Android Studio, There is a simpler and easy method.

There is a Website Called Android Asset Studio. It is created by an amazing developer called Roman Nurik. We can use this website instead of the Image Asset Studio which is only available on Android Studio. Let’s get started.

Get Started

First of all, go to the above-mentioned website https://romannurik.github.io/AndroidAssetStudio/.

Android Asset Studio

Then click on Launcher Icon Generator.

You will be navigated to a studio-like page.

Icon Generator Page

If we look closely, we can see that we have 3 Options for creating an Icon.

The first one is Image. If we click on that, we’ll be prompted to select an Image.

Select Image Dialog

The second one is Clipart. If we select it, we’ll have to select an Icon.

Select Icon

And the third one is Text. And It allows us to Type a letter or a word.

Type Text

Download Logo

After we prepared our logo, let’s Continue generating our Logo. For that, click on the blue Download icon on the top right corner. By default, it will download a file named ic_launcher.zip. This ZIP file contains all the files needed to change our Logo.

Next, extract this ZIP to somewhere.

Changing Logo

If you have observed the file structure inside the Android Folder in a Flutter Project, you may have noticed there is an src folder inside it.

Inside that folder, there will be folders named debug , main , and profile. Our target is a folder named res inside the main folder.

Folder Structure

We can see that many folders are starting with mipmap in them.

Now open the extracted ic_launcher folder. We can see a folder named src similar to that we saw on the main folder.

The content of the src folder is also similar to the previous src folder we saw. But this one only has folders starting with mipmap. These are the folders which contain our new Logo.

Folder Contents

Now copy all these folders to the First src Folder we opened. It will replace our old (Default Flutter Logo) with our New Logo.

Final Steps

After Changing the Files, we have to completely rebuild our app to see the changes. For that, let’s clean our Flutter Project by running the below command.

flutter clean

If we run our project now, We can see that our Logo has been changed to the new One.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Firebase Messaging Flutter

mukhtharcm — Sat, 14 Aug 2021 22:30:00 +0000

Firebase Messaging is another cool feature of Firebase Suite. It allows us to send notifications to our users and much more.

Setup

First, we have to set up Firebase for our Flutter Project. Checkout my post on setting up Firebase if you haven’t already.

Then we have to add the Firebase Messaging plugin to our project.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
firebase_core: ^1.3.0
firebase_messaging: ^10.0.4 # add this

Basically, this is all you need to send notifications to using Firebase!.

Getting Firebase Messaging Token

Firebase Messaging token is used to send notifications to specific devices.

For getting this, there is a function in the Firebase Messaging plugin. So let’s get the token and print it to the console.

Future getToken()async{
var token = await FirebaseMessaging.instance.getToken();
print("Your FCM token is : $token");
}

Running the above code will output something like this,

dG_9FYgjSiOmHlv_XxyQ8h:APA91bEsV52c873LipKZZQgU2M__XuvKHZn2EsjN2LY8NNiA9_lF_jXNvmnfqi7F5lOEhi5A2kLILGqSY71yrJGNfwcNHUgQ-kXNAP88KIMoFHuDrq5Y2cENV4h2a139JqHFVajaH4pW

Take note of the token we got from this step.

Preparing our Test Notification

We can use the Firebase Console to Send a notification to our Device. First of all, go to https://console.firebase.google.com and Select your project. Then from the sidebar, select Cloud Messaging under the Engage Section.

Click on Cloud Messaging

This will open the FCM Section.

Then Click on New Notification. It’ll open a dialog to send a new Notification.

New Notification Dialog

Fill out the Notification Title and Notification Text. And Optionally, you can also add an Image to your Notification. You can see the Device preview on the Right side.

filled the Notification Fields

Sending our Test Notification

For this step, Just click on Send Test Message on the Right Side. This will open a dialog to enter the token we previously noticed.

Add New Test Device

Copy-paste the token we noted earlier and click the plus button on the right.

Then Click Test.

Voila! You have sent your First Notification!

Check your device and you’ll see something like this on the Notifications Panel.

Notification we send

PS: That unlimit on the top is one of my Client Works.

Sending Notification to Multiple Devices

From the Firebase Console itself, we can also send Notification to multiple Devices.

Instead of clicking the Send Test Message , Just click Next. It’ll take us to select our Target.

Select Target .

This is dialog is for Selecting the Apps we want our notification to send to ( One of the Apps connected to our Firebase Project). You Can also target Topics Here.

The Next Step is to Schedule the Notification.

We can shedule to a Future Date or Can Just Set Now

The next two steps are optional. So just skip and click On Review at the bottom right.

This will open the Dialog to Finally publish our Notification.

Publish the Notification

This will deliver our Notification to every device which matches the criteria we set.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Persisting Data on Firebase Emulator

mukhtharcm — Fri, 13 Aug 2021 22:30:00 +0000

Firebase Emulator Suite is a great tool to develop with Firebase locally. It allows us to even use Firebase Functions without the paid Blaze plan.

But by default, Firebase Emulators don’t store any data. That is, if I ran Firebase Auth Emulator and created a User when I run It next time, The User would’ve been deleted.

Or, All those Notes you created in Firestore would’ve wiped.

I don’t know about you, It is a mess to play with Emulator UI to add mock Data. So I’d rather save them.

Even though Firebase Emulators Don’t have something like Saving Data, Luckily, they Can Export and Import Data. Let’s dig into it.

Exporting Firebase Emulator Data

While the Emulators are running, run the below command in another terminal to export emulator Data. Of course, it should be in the same folder as you’re running the Emulators

firebase emulators:export <export-directory>

This will export the emulator data to the Directory you specify.

There is another method to do it. If we start the Emulators with an --export-on-exit flag, the Firebase Emulator will automatically export Data when we shutdown it.

firebase emulators:start --export-on-exit

Importing Emulator Data

We can import data from an earlier export by starting the emulator by running the below command.

firebase emulators:start --import <export-directory>

This will import data from the directory we earlier exported.

Combined method

What if we can do both of these in a single command?

We can combine the above commands to make another command which will do both the functions. ie, Importing and Exporting.

firebase emulators:start --import <export-directory> --export-on-exit

The above command will import data from the directory we specify at <export-directory> and exports the emulator data on Exit to the same directory.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Firebase Emulator setup for Flutter

mukhtharcm — Thu, 12 Aug 2021 22:30:00 +0000

Maybe you’re trying to set up a local dev environment for your Firebase Project. Or you may want to try out Firebase Functions, but are on the spark plan of Firebase.

Whatever It may be, Firebase offers us an emulator suite we can use to experiment with Firebase locally.

Install Firebase CLI

First of all, we need to Install the Official Firebase CLI on our Computer.

npm install firebase-tools -g

Run the above command to Install the Firebase CLI globally to our System.

Next, we have to log in to the Firebase CLI using firebase login. This will take you to the browser for confirming login. Click allow to login to the cli. And It will show a Successful Message.

CLI login succesful!

Initializing Firebase Project

The next step is to initialize your firebase project. Go to your Flutter project which you want to use Firebase, and run the below command.

firebase init

It will show Firebase in a large yellow font. The prompt will ask you some questions, the first being are you ready to proceed. Press Y to continue.

Selecting Services

The next prompt will be to select the Services we want to initialize. Select all the services you need by pressing the spacebar to select. Then click enter to continue.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
( ) Hosting: Set up GitHub Action deploys
( ) Storage: Configure a security rules file for Cloud Storage
( ) Emulators: Set up local emulators for Firebase products
>( ) Remote Config: Configure a template file for Remote Config
( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
( ) Firestore: Configure security rules and indexes files for Firestore
( ) Functions: Configure a Cloud Functions directory and its files
(Move up and down to reveal more choices)

Don’t forget to select Emulators Here!

Selecting Project

The next step is to select which project we want our Flutter project to associate with. For the sake of this tutorial, I have already created a Firebase Project in my Firebase Console. If you haven’t yet, you can follow My post on setting up Firebase for Android on Flutter.

So select Use an existing project in this prompt

? Please select an option: (Use arrow keys)
> Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project

It will show a list of all the projects you’ve created and you’ll have to select one.

you can just select Don’t set up a default project and move on!.

The next couple of prompts will be based on the services you’ve selected in the previous step.

For this post, we’ll be covering only the Emulator Setup. The CLI will ask which emulators we want to set up.

? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Authentication Emulator
(*) Functions Emulator
( ) Firestore Emulator
( ) Database Emulator
( ) Hosting Emulator
( ) Pub/Sub Emulator
( ) Storage Emulator

Select all the emulators you want to use in this project.

Then it will ask which post should be used for each emulator. Click enter to select the default options.

When the CLI asks whether to download the emulators now or later, click Y to download them now.

After these, the CLI will show a success message.

+ Firebase initialization complete!

To the Flutter-Side

Next, we are going to set up our Flutter project use the local emulators instead of our Production Firebase Project.

Each of the Firebase plugins for Flutter has something like .useEmulator in them. So for convenience, I have created a function to make all of the Firebase products use Emulators.

Future _connectToFirebaseEmulator() async {
final localHostString = '{your system Ip Address}';
FirebaseFirestore.instance.settings = Settings(
host: '$localHostString:8080',
sslEnabled: false,
persistenceEnabled: false,
);
await FirebaseStorage.instance
.useStorageEmulator('http://$localHostString', 9199);
await FirebaseAuth.instance.useAuthEmulator('http://$localHostString', 9099);
}

The official documentation recommends just use localhost instead of your system Ip Address, But I will explain it in a bit.

When I was trying to connect to emulators from a Real Device (aka not an android emulator), I was unable to connect to them using only localhost. If you’re using Android or iOS emulators, you may stick with the localhost version.

Future _connectToFirebaseEmulator() async {
FirebaseFirestore.instance.settings = Settings(
host: 'localhost:8080',
sslEnabled: false,
persistenceEnabled: false,
);
await FirebaseStorage.instance
.useStorageEmulator('localhost', 9199);
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
}

we have to call the above function to be the runApp method in main.dart

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await _connectToFirebaseEmulator();
runApp(
MyApp(),
);
}

Don’t leave just yet! For my hacked out version to work, we have to make changes to one more file.

Adjusting firebase.json file

There is a file named firebase.json at the root of our Flutter project. Don’t worry, it was created during our Firebase CLI initialization.

By default, it will look something like this.

{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"pubsub": {
"port": 8085
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true
}
}
}

There is a port key in every emulator listed in the JSON. We need to add a host key to them.

We have to provide our system IP as the host. To get our IP address, we can run ipconfig on windows and ifconfig on Linux. In my case, It was 192.168.42.54

So my firebase.json looks like this.

{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"auth": {
"host": "192.168.42.54",
"port": 9099
},
"functions": {
"host": "192.168.42.54",
"port": 5001
},
"firestore": {
"host": "192.168.42.54",
"port": 8080
},
"storage": {
"host": "192.168.42.54",
"port": 9199
},
"ui": {
"host": "192.168.42.54",
"enabled": true
}
}
}

Running the emulators

Now is the time to run’em! 🎉

run the below code in the terminal on the root of your Flutter Project.

firebase emulators:start

wait some time and you’ll see the magic.

Firebase emulators running

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Easy Dialogs using GetX

mukhtharcm — Sun, 02 May 2021 22:30:00 +0000

Intro

I you have read my post about snackBars using GetX, You already know how easy is it to work with GetX in Flutter.

Dialogs are an essential part of mobile Apps. They help to convey alerts and important messages as well as to do certain actions.

Normally in Flutter, shown below is a sample code for showing and Alert Dialog.

showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text(
"Alert",
),
content: Text(
"This is sample Content",
),
),
);

That’s too many Lines of code for a Simple Dialog like this. But, thankfully GetX makes this easier. In GetX, we only have to use the following code,

Get.defaultDialog(
title: "Alert",
content: Text(
"This is a sample Content",
),
);

I think this makes a big difference.

Add Package

First of all, we have to add the get package into our pubspec.yaml file

dependencies:
flutter:
sdk: flutter
get: ^4.1.4 # Get the latest version from https://pub.dev/packages/get

Change to GetMaterialApp

To all navigation and routing things work with GetX, we have to change our MaterialApp to a GetMaterialApp. For this, we have to import the library first

import 'package:get/get.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp( // Changed from MaterialApp to GetMaterialApp
 home: HomePage(),
);
}
}

If this step is not completed, it will throw an error when we try to use something like Get.dialog().

We’re good to go now.

GetX default Dialog

This is the type of dialog which I have shown as an Example.

Get.defaultDialog(
title: "Alert!",
content: Text("This is a sample Content"),
)

Put the above code inside any onPressed or onTap method and see the magic.

GetX Dialog

This is also a simple way to show a dialog. But in this, we don’t have parameters like title and content, But we have to construct them manually. It accepts a widget and we have to build our Dialog from Scratch.

Get.dialog(
Text("This is a simple Dialog"),
)

the above code will show a simple dialog with the text, This is a simple Dialog. But it is not cool looking.

Get Dialog With Just Text. Sure It’s not something we wanna do!

So we should always return a Dialog widget from Get.dialog and put anything we want to show the user as the child of the Dialog Widget.

End

You can find more articles related to GetX Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions in Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Check App on Different Screen Sizes and Orientations

mukhtharcm — Fri, 30 Apr 2021 22:30:00 +0000

You have successfully created a mobile app. And now you have to see how it may work on another device with different screen size. Grab your friend’s phone and Install the App on it. Right?

The flutter package ecosystem has an amazing package named device_previewwhich can help you with that. It allows us to view our App on Different form factors (phone, laptop, tablet, desktop) and different Operating Systems.

App running with Device Preview

Adding packages

For this tutorial, we just have to import the device_previewto our pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
device_preview: ^0.7.1

Setup

Next, we have to import the package to our main.dart file

import 'package:device_preview/device_preview.dart';

Next, we have to wrap our root widget in DevicePreview. ie, we have to put DevicePreview inside runApp and provide our Root widget at the builder parameter of it.

void main() {
runApp(
DevicePreview(
builder: (context) => MyApp(),
),
);
}

Next, we have to change the locale and builder parameter of MaterialApp to one provided with DevicePreview.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.locale(context),// Add locale
 builder: DevicePreview.appBuilder, // Add builder
 title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}

If we run the app now, we can see the DevicePreview package in its glory.

Device Preview Showing app running on a MacBook

The bottom bar provided with the package has a couple of options. The first toggle allows us to completely turn off the Device Preview.

The second option is to change the Device. Here we have the option to choose between multiple iPhones, Android Devices, an iMac Pro as well as MacBook and Linux, and windows systems. We also have an option to select a free-form Device.

The third one is locale. If we change the locales here, the app will change it as it was changed on the real Device.

And the next is Orientation. With this option, we can see how our App will look in Another Orientation, ie, landscape.

The Device Preview showing an iPad in Landscape Mode

And then there is an option to Hide device frames, show Keyboard, etc. I think they’re self-explanatory.

The Next option is to change the Device Theme. Toggling it will simulate the Same effect on a Real Device.

Plugins

The Device preview package has a real nice Plugin System. It has a Screenshot Plugin, File Explorer plugin, SharedPreferences Viewer, etc. And there is an option to build your own. You can find How to do that here.

For Adding Plugins, we have to add the plugins array of Device Preview.

void main() {
runApp(
DevicePreview(
plugins: [
ScreenshotPlugin(),
],
builder: (context) => MyApp(),
enabled: !kReleaseMode,
),
);
}

The above code will add Screenshot functionality to our App. If we click on the Screenshot button provided now on the bottom bar, A screenshot will be taken and we’ll be given a URL to view it.

With all these, we can test how may our App look on Different Devices

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions in Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.

Sharing Files in Flutter

mukhtharcm — Tue, 27 Apr 2021 22:30:00 +0000

Sharing is an integral part of mobile apps. Millions of digital content are produced and consumed every minute. Because of this, we can’t avoid a feature like this on our mobile apps.

There is a package named share in Flutter to do just this. it can be used to share just text or even Files.

First, let’s add the package to our pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
share: ^2.0.1 # add the latest version from pub.dev

To share a simple text, use Share.share() anywhere on our App.

Share.share("Your Text to Share");

It will bring up the share dialog of respective platform, whether if you’re using Android or iOs.

If we have to share Files, we can use Share.shareFiles()it accepts a list of File Paths to share.

File mycoolImage;
Share.share([mycoolImage.path,]);

below is the same example from Generate Image from Widget Tutorial, but with the added function of sharing the generated Image.

Future<void> takePicture() async {
RenderRepaintBoundary boundary = genKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
final directory = (await getApplicationDocumentsDirectory()).path;
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File imgFile = new File('$directory/photo.png');
await imgFile.writeAsBytes(pngBytes);
await Share.shareFiles([imgFile.path]);//Sharing the generated Image
}

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions in Twitter DM or drop a mail a mukhtharcm@gmail.com.

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.