Hello friends, Emoji’s is a big part of today’s mobile applications. They are used to show a emotion using a single small image icon. There are a lot’s of emoji’s available on internet free for use. Now when the first time I was trying to implement Emoji’s in flutter app so I started looking on internet and I found few Pub packages for flutter to add emoji in flutter. But They are a bit complicated, So I tried to found another simple way to implement them, Now here comes the main catch. When I just copy a Emoji and paste into my code editor Visual Studio and re-compile the app and I saw a magic. Emoji’s is directly showing into Flutter application without any external code all by itself. This is very good for new developers because If you want to only show emoji in your Text then all you have to do is copy and paste emoji in your code editor. It works pretty well. So in this tutorial we would learn about Example of Add Show Emoji in Flutter App with Text in Android iOS.
Useful Links :- Below I’m sharing 2 Websites links where you can find Good emoji for you app.
Contents in this project Example of Add Show Emoji in Flutter App with Text :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our main Void() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating MyApp class extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Make 3 Text widget and in Each Text widget we would simply using Emoji’s by copy and paste.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Show Emoji in Flutter App"), ), body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const <Widget>[ Text( 'Made With ❤️ by Flutter-Examples.com', style: TextStyle(fontSize: 20), textAlign: TextAlign.center, ), Text( '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), Text( '🍅 🍑 🍒 🏄♂️ 🐻 💖 📙 ', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), ], ), ))), ); } |
5. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Show Emoji in Flutter App"), ), body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const <Widget>[ Text( 'Made With ❤️ by Flutter-Examples.com', style: TextStyle(fontSize: 20), textAlign: TextAlign.center, ), Text( '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), Text( '🍅 🍑 🍒 🏄♂️ 🐻 💖 📙 ', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), ], ), ))), ); } } |
Screenshot in Android device :-
Screenshot in iOS device :-
