Code With Jam

Posts

Flutter Add Image Icon in AppBar - Shopping Cart, Settings

Hello friends, In today's tutorial we will learn about displaying Image Icon in AppBar of flutter application. The AppBar widget has a property actions which supports multiple widget array. We can create IconButton as child widget of AppBar. It's very easy to integrate. Basically we have seen in shopping apps the Shopping Cart icon is present at the AppBar or in many apps the settings icon also present in the AppBar. Flutter Add Image Icon in AppBar 1. Defining AppBar widget with actions property and here we will show the Shopping Cart Icon with Icon onPressed event integrated. AppBar( title: const Text('Flutter AppBar'), actions: <Widget>[ IconButton( icon: const Icon(Icons.shopping_cart), tooltip: 'Shopping Cart', onPressed: () { print("Button Clicked..."); }, ), ],

Create Flutter App with AppBar

AppBar widget created Material style AppBar in flutter app for all the available devices. Basic use of AppBar is to display app screen Title and If we are using multiple screens in our app it will show us Screen name with Back button to go to previous screens. When we create app for iOS devices it is recommended to use AppBar because iOS devices does not have Back hardware button. Create Flutter App with AppBar 1. Defining appBar property in Scaffold widget and create AppBar widget . We will be using AppBar Title property to define screen Title and assign Text widget to it. This is the default AppBar with default styling. AppBar( title: const Text('Flutter AppBar'), ) Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title:

Flutter Dart Simple Queue Example

Queue is a type of data structure. Queue can performs data insertion operations from both sides front and end. Queue is based upon FIFO data insertion method. Here FIFO means first in first out. Flutter Dart Simple Queue Example 1. Import dart:collection package in our flutter main.dart file. import 'dart:collection'; 2. Defining a Integer type of Queue in Dart. final testQueue = Queue<int>(); 3. Inserting item at first position of Queue in dart. testQueue.addFirst(0); 4. Inserting item at last position of Queue in dart. testQueue.addLast(6); 5. Inserting multiple items at once in middle of Queue in dart. testQueue.addAll([1, 2, 3, 4, 5]); 6. Removing First and Last item from Queue in Dart. testQueue.removeFirst(); testQueue.removeLast(); 7. Removing specific item from Queue in Dart. testQueue.remove(1); 8. Delete all items from Queue and clear. testQueue.clear(); You can learn about more Queue functions HERE on Dart's official page. Complete source code

Flutter Load Local HTML File in WebViewWidget

Flutter WebView upgrades into WebViewWidget. In today's tutorial we will learn about loading local HTML and CSS file into WebViewWidget. With this method we can load entire HTML website template from local assets folder. This will not required active internet connection If we place all the images also locally. Flutter Load Local HTML File in WebViewWidget 1. In the first step we have to Install WebViewWidget Pub package in our flutter project. I have already made tutorial regarding this topic. You can VISIT IT FROM HERE . 2. Creating a test HTML file index-first.html . I am putting demo HTML code in this file for testing purpose. <HTML> <HEAD> <style> body { background-color: #00BCD4; } h1 { color: #fff; } p { color: #fff; } </style> <TITLE> Testing Local Web Page in Flutter WebView </TITLE> </HEAD> <BODY> <div> <h1 style="font-size:10vw;" >

Flutter Dart ListQueue Example

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

Flutter WebViewWidget Render Inline HTML Code with CSS

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> &

Flutter Dart LinkedList Example

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,