Flutter:Create Custom Quick Tile (Android Only).
Tags: flutter, android, programming, tutorial
Published: 2022-09-08 11:56:26

## **Tile**

A [Tile ](https://developer.android.com/reference/android/service/quicksettings/Tile.html) holds the state of a tile that will be displayed in Quick Settings. A tile in Quick Settings exists as an icon with an accompanied label. It also may have content description for accessibility usability. The style and layout of the tile may change to match a given device.

## **Why Do We need Quick Setting Tile ?**

- To add custom Tiles in the Quick Settings menu in addition to the existing ones such as WiFi, Bluetooth, Airplane Mode, etc.

- Custom Tiles help user to avoid open app for changing specific setting of the app,user just press tile its should work accordingly whats specified. 


![meme1](https://i.imgflip.com/6sn70e.jpg)



> ## **Lets Go and Try in Flutter :**

- Create new flutter project.

- Now open **"AndroidManifest.xml"** and click on **"Open for editing in Android Studio**" and wait Until gradle completes.


![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8hau4ebxa4tn1x3t65g.png)

![Meme2](https://i.imgflip.com/6sn804.jpg)


- Add following lines of Accessing Tile Service in **"AndroidManifest.xml"** file.

```
<service
           android:name=".MyTileService"
           android:icon="@drawable/flutter"
           android:label="Flutter App Tile"
           android:permission="android.permission.BIND_QUICK_SETTINGS_TILE"
           android:exported="true">

           <intent-filter>
               <action android:name="android.service.quicksettings.action.QS_TILE"/>
           </intent-filter>
       </service>

```

**Note add you icon in @drawble and [check out instruction here](https://developer.android.com/develop/ui/views/quicksettings-tiles).**

- Now create a new Kotlin file named **TileService** in app package and following content : 

{% gist https://gist.github.com/Djsmk123/f9445f041ca56fd1b12dfe6ffd7069fd %}



> ## **TileService** has following methods :



**OnTileAdded**: When the user adds the Tile in the Quick Settings

**OnTileRemoved**: When the user removes the Tile from the Quick Settings

**OnTileClick**: When the user clicks the Tile

**OnStartListening**: When the Tile becomes visible (this happens when you have already added the tile and you open the Quick Settings)

**OnStopListening**: When the Tile is no longer visible (when you close the Quick Settings)

We are going to work in **OnTileClick()** Function.

- **OnClick** Handler: On click tile, for example we are going to launch **calendar** app to see,it's working or not.
{% gist https://gist.github.com/Djsmk123/e9f70aaa1e7d7100c477f966a39b79f9 %}


- Now run the app and Lets see output.


![Outpu1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9w8kbv04p9dyn7j4c60.gif)

- Now we are going to Launch the app by pressing tile and send message from Native (Kotlin) code to Flutter.

[Read here more for Launching Flutter Activity](https://docs.flutter.dev/development/add-to-app/android/add-flutter-screen?tab=prewarm-engine-kotlin-tab#step-2-launch-flutteractivity)

- For Launching Flutter Activity, we need to specify flutter activity in **AndroidManifest.xml** file.

{% gist https://gist.github.com/Djsmk123/cac0dab60f462c3e4f9302ab0d34322d %}

- Lets Launch Flutter Activity and send Arguments in Flutter Code.

{% gist https://gist.github.com/Djsmk123/1bd9332f12c9d906291e4861d11a75f8  %} 


- Listen quick tile On Click in Flutter Code:

{% gist https://gist.github.com/Djsmk123/356af6763f3aef756c676f70636c2b3d %}



if App run by user manually, we will be receiving empty list of arguments and when user open app from quick tile,then will receive list of strings.


**Lets See Output**



![final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jirpxkx90w9pbax9mqpu.gif)


- [**Source Code**](https://github.com/Djsmk123/quick_tile_flutter)


> Follow me:

- [GitHub](https://github.com//djsmk123)

- [LinkedIn](https://www.linkedin.com/in/md-mobin-bb928820b)

- [Twitter](https://twitter.com/smk_winner)