Code With Jam

ListQueue is a type of List based on Queue format. ListQueue keeps cyclic buffer of items within and it can increase size when large mount of data fills in. Flutter Dart ListQueue Example 1. Import dart:collection package in your flutter project main.dart file. import 'dart:collection'; 2. Creating a Integer type  ListQueue . final testLQ = ListQueue<int>(); 3. Inserting items in ListQueue. testLQ.add(2); 4. Adding item at first position in ListQueue  . queue.addFirst(1); 5. Adding item at the last position in ListQueue . testLQ.addLast(5); 6. Inserting multiple items in ListQueue. testLQ.addAll([3, 4, 6]); 7. Check  ListQueue is Empty or Not . print(testLQ.isEmpty); 8. Check  ListQueue length . print(testLQ.length); 9. Get first item of ListQueue. print(testLQ.first); 10. Get last item of ListQueue. print(testLQ.last); 11. Remove First item from ListQueue. testLQ.removeFirst() 12. Remove last item from ListQueue. testLQ.removeLast(); 13. Printing all items wit

In today's tutorial we will write our own inline HTML code including inline CSS in String format. We will store all the HTML code to a single String variable. Now we will call HTML code variable into  WebView Widget  with  Uri.dataFromString() function which converts all the String into HTML format. Flutter WebView Widget Render Inline HTML Code with CSS 1. First of all we will install WebView Widget in our flutter project. I have already make a tutorial on WebView Widget Installation Guide. You can visit the tutorial from HERE . 2. Import  material.dart and webview_flutter.dart in your main.dart file. import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; 3. Creating a variable  htmlCode and define all the Inline HTML. final htmlCode = """<div> <h1 style="font-size:10vw;" >This is Heading H1</h1> <h2 style="font-size:10vw;" >This is Heading H2</h2> &

LinkedList stores data elements in format of Nodes. In flutter we can make dynamic LinkedList by extends LinkedListEntry class. In today's tutorial we will create a dynamic LinkedList and perform various operations. Flutter Dart LinkedList Example 1. Import  dart:collection class in your main.dart file. import 'dart:collection'; 2. Creating a class  TestLinkedList extends LinkedListEntry . This is our LinkedList separate class. It has two variables ID and Name. final class TestLinkedList extends LinkedListEntry<TestLinkedList> { final int id; final String name; TestLinkedList(this.id, this.name); @override String toString() { return '$id : $name'; } } 3. Creating Object of TestLinkedList in our main() class . final linkedListOBJ = LinkedList<TestLinkedList>(); 4. Adding multiple items in linked list with addAll() method. linkedListOBJ.addAll( [TestLinkedList(1, 'A'), TestLinkedList(2, 'B'), TestLinkedList(3,

The ScrollView normal scrolling direction is vertical content scrolling. In horizontal ScrollView content scrolls horizontally. We can make SingleChildScrollView widget scrolls horizontally with  scrollDirection: Axis.horizontal property. This property controls in which Axis it scrolls. Flutter Horizontal ScrollView 1. Creating String variable to store online Image URL. We will display this image in ScrollView. final String testImage = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg'; 2. Creating  SingleChildScrollView widget including  scrollDirection: Axis.horizontal prop to enable horizontal scrolling. SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: [ Container( color: C

In dart LinkedHashSet works as a hash table including on a set implementation. LinkedHashSet is used where we want to keep track of the inserted data order. Flutter Dart LinkedHashSet Example 1. Creating Empty LinkedHashSet . final tempName = <String>{}; 2. Creating LinkedHashSet with default filled values . final tempName = <String>{'A', 'B'}; print(tempName); 3. Adding multiple values together in LinkedHashSet. tempName.addAll({'C', 'D', 'E', 'F'}); 4. Checking  LinkedHashSet is Empty or Not . print(tempName.isEmpty); 5. Get the length of LinkedHashSet . print(tempName.length); 6. Find and check if certain value is present or not in LinkedHashSet. final b_Exists = tempName.contains('B'); print(b_Exists); 7. Print all LinkedHashSet on Terminal screen one by one with For Each loop. tempName.forEach(print); 8. Removing Single item from LinkedHashSet. tempName.remove('E'); 9. Creating a duplicate copy of

Loading Indicator is a visual reminder to app user that your data is loading in the background and when it finish loading we will display it on the screen. Same we will done in WebViewWidget in flutter. We will display a CircularProgressIndicator() widget at the middle of screen while loading web page in WebViewWidget. When complete web page has been loaded we will hide the CircularProgressIndicator() and display loaded web page. Flutter Loading Indicator on Web Page Load in WebView 1. First of all we have to install WebViewWidget in our flutter project. To install WebViewWidget VISIT my WebView Installation tutorial . 2. Open project's main.dart file and import  material.dart and webview_flutter.dart package. import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; 3. Creating a Boolean variable with default True value defined. We will use this variable to control visibility of CircularProgressIndicator(). bool isVisible

WebViewWidget is a compact mobile web browser integration package in flutter. WebViewWidget comes with various configuration options to control how a web page can display in flutter application and how we can trigger a particular event while loading web page. You can download and install WebViewWidget page from pub.dev . Flutter WebViewWidget Example 1. To install WebViewWidget package , Open your flutter project in terminal and execute below command. flutter pub add webview_flutter 2. Import  material.dart and webview_flutter.dart package in your flutter project main.dart file. import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; 3. Creating a  WebViewController() to manage WebView widget different options. we will pass here our web page URL which we want to load in WebView. final controller = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..setBackgroundColor(Colors.black) ..loadRequest(Ur

In flutter to enable vertical scrolling on screen, we will use  SingleChildScrollView widget. SingleChildScrollView increases its height as per it's Child height. When we put Column widget as it's child than we will add multiple Children widget and scrolling functionality will be applied on all of them. Flutter ScrollView Easy Example 1. Creating  SingleChildScrollView widget and define Colum widget and put multiple Text, Container and Image widget inside it. SingleChildScrollView( child: Column( children: [ Container( color: Colors.blue, width: double.infinity, height: 100.0, ), const Text('Text - 1', style: TextStyle(fontSize: 24)), Container( color: Colors.brown, width: double.infinity, height: 100.0, ), Image.network(testImage, width: 300, height: 200, fit: BoxFit.contain),

In today's tutorial we will make alert dialog with image(icon). We will modify alert dialog whole layout and Put Image then alert title and OK and Cancel button. AlertDialog widget has 3 main properties Title, Content and Actions. Title contains the main title of Alert dialog. We can even place multiple widgets inside it. Content has the 2nd sub text of alert dialog. Action contains buttons. Flutter Alert Dialog with Icon 1. Creating a String variable and assign Image icon URL as String. String iconURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrD3a2NKbu8ciNIVpLr0EJWb-QvUhqUfSSqKDbxRSeQFqLjwcHYW62TEtuXTVZ9pPhyB95SmNzfuFQcNcfQ8-hzfkAmeesTmYFokGQA1a7DsTlrCmCLJ4vU0B28KlrT-ndz9ShbWQ4RTo3ZJYo3zOU7A314ZrnAdSxhgH1OxqVTlN1-1nI9ayg-_iSLjA/s256/exit.png"; 2. Creating  AlertDialog widget in  showDialog() method. title content actions Future<void> simpleAlert() async { await showDialog<void>( context: context, builder: (Build

LinkedHashMap is the combination of Map and HashMap class. LinkedHashMap is used to preserve data insertion order. The values we enter in the LinkedHashMap is based on Key.  Flutter Dart LinkedHashMap Example 1. Creating LinkedHashMap and assigning value. final menByWeight = {93.33 : 'A'}; 2. Adding next item to LinkedHashMap. menByWeight[100] = 'B'; 3. Adding multiple items together in LinkedHashMap. menByWeight.addAll({80.88: 'C', 40.22: 'D'}); 4. Printing LinkedHashMap elements one by one on screen with forEach loop. menByWeight.forEach((key, value) { print('$key \t $value'); }); 5. Checking LinkedHashMap is empty or not. print(menByWeight.isEmpty); 6. Get length (Items count) of LinkedHashMap. print(menByWeight.length); 7. Checking LinkedHashMap for specific key is present or not . final key1 = menByWeight.containsKey(80.88); print(key1); 8. Checking LinkedHashMap for specific Value is present or not . final value1 = menByWeight.c

Status bar presents in every mobile including Android iOS devices. Their main purpose is to display device Battery, Network Tower, Bluetooth, WiFi, Hotspot information show to the user all time when they are activated. In flutter we will change Status bar color with  SystemChrome.setSystemUIOverlayStyle() method which provide us many system UI overlay styling options. Flutter Change Status Bar Color 1. Import  material.dart and services.dart package in your project. import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; 2. Creating  SystemChrome.setSystemUIOverlayStyle() method in Widget Build area of our main Root Class. When we apply these setting to the Root it will automatically applied on all the Children screens globally in the whole app. Note: In iOS we cannot set color of Status bar. We can only make Status bar brightness.  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle( // Set Status bar color in Android.

YouTube is one of the best video streaming platform available on internet today. Few times there are requirement to show YouTube videos in app. Because every product company has their Ads, promotional videos and user testimonials uploaded on their YouTube channel. We will play YouTube videos in flutter app with  youtube_player_flutter package. We have to install this package in our flutter project and boom YouTube videos will start playing in flutter app. Flutter Play YouTube Videos 1. Execute below command to install  youtube_player_flutter in your flutter project. This command must be execute in project folder from Terminal. flutter pub add youtube_player_flutter 2. For Android setup we will set set minSdkVersion to 17 in your flutter app android/app/build.gradle file 3. For iOS setup we will set  io.flutter.embedded_views_preview key in info.plist file. <key>io.flutter.embedded_views_preview</key> <true/> 4. Import  material.dart and youtube_player_flutter.dar

Today we will integrate Blinking text animation with  blinking_text Pub package. In this package we will get all types of blinking animation controlling options including duration. Text will change it's color smoothly with animation. Flutter Blinking Text Animation 1. Install  blinking_text package in your flutter application. Open your flutter project PATH in terminal and execute below command. flutter pub add blinking_text Terminal Screenshot: 2. Import  material.dart and blinking_text.dart package in main.dart file. import 'package:flutter/material.dart'; import 'package:blinking_text/blinking_text.dart'; 3. Creating  BlinkText widget with all required properties. Code Explanation: style : Support all text styling options. beginColor : Animation starting color. endColor : Animation ending color. times : How many times blinking animation should run. duration : To perform a single animation how much time it will take. BlinkText('Blinking Text Animation',

In HashSet we will store the data single or multiple with collection in Hash Table. There are a condition that all the elements we will store in HashSet should have consistent equality including Hash Code. So in this tutorial we will learn about Flutter Dart HashSet with Example. Flutter Dart HashSet with Example 1. Import 'dart:collection' class. Because this class has HashSet defined. import 'dart:collection'; 2. First we will learn about Creating a String type of HashSet . With same initialization we can make integer, double type of HashSet. final testHashSet = HashSet<String>(); 3. Adding single item in HashSet with add() method. testHashSet.add('A'); 4. Adding multiple items in HashSet with  addAll() method. testHashSet.addAll({'B', 'C', 'D'}); 5. To get length of HashSet in dart we will use  HashSet.length method. print(testHashSet.length); 6. To check HashSet is empty or not we will use  HashSet.isEmpty method. print(test

HashMap creates an unordered key map data object. The order of items can specified later and can also be in any order. For example we can add item at index 10 without adding items on before index 10. If we add item on index 7 later then it will automatically arrange the HashMap after assigning value. Flutter Dart HashMap Example 1. Import  dart:collection package. import 'dart:collection'; ` 2. Defining a  HashMap for Integer and String value. final Map<int, String> countTable = HashMap(); 3. Adding Items in HashMap on random index position. countTable[3] = 'Three'; countTable[1] = 'One'; 4. Adding item in HashMap with Index position included. countTable.addAll({4: 'Four'}); 5. Add multiple data with multiple index positions. final tempData = {6: 'Six', 5: 'Five'}; countTable.addEntries(tempData.entries); Source code for main.dart file: import 'dart:collection'; void main() { final Map<int, String> countTab

DoubleLinkedQueue is a type of double linked list. In Double linked list each data node is connected to previous data node. Queue is based on FIFO first in first out method. In easy meaning data which will added first will be deleted first. You can learn more deep about Double linked list HERE on flutter's official page. Flutter Dart DoubleLinkedQueue Example 1. Import  dart:collection package in our flutter project. Because this package has  DoubleLinkedQueue class defined. import 'dart:collection'; 2. Defining a  DoubleLinkedQueue . var monthQueue = DoubleLinkedQueue<String>(); 3. Adding items in  DoubleLinkedQueue with Add() method. monthQueue.add("January"); monthQueue.add("February"); monthQueue.add("March"); monthQueue.add("April"); monthQueue.add("May"); Source code for main.dart file: import 'dart:collection'; void main() { var monthQueue = DoubleLinkedQueue<String>

To sort Map by its value in ascending order we will use  Map.fromEntries() function and pass value object inside it. When we pass value object then it will compare all the values and index them alphabetically. Flutter Dart Sort Map by Value Alphabetically void main() { Map testMap = {10: 'T', 8: 'E', 6: 'S', 4: 'F', 2: 'T', 9: 'N', 7: 'S', 5: 'F', 3: 'T', 1: 'O'}; var sortedMap = Map.fromEntries( testMap.entries.toList()..sort((e1, e2) => e1.value.compareTo(e2.value))); print(sortedMap); } Output: