Code With Jam

Posts

Showing posts from September, 2023

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;" >