Orkitt - Crafting Digital Excellence with Flutter

In this example, you will learn to display HTML Content as a flutter widget. We are going to use a flutter package to convert HTML into flutter widget and also do some actions with html content. You can interact with html like changing colors, action on clicking link or even you can build custom widget with your HTML Contents. Flutter Widget from HTML This is a Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and also 70+ other tags. In one word, this package supports most common HTML tags for easy usage. First of all, create a new project and run this command to add this to your app's pubspec.yaml file flutter pub add flutter_widget_from_html Basic of HTML Widget This package is not work as web view. We can only show HTML content as flutter widget. Here is the use cases HtmlWidget( // put your HTML Content inside ''' it's required ''' <h3>Heading</h3> <p> A paragraph with ...

In this Example we are going to remove HTML Tags from string. It's important to remove tags from html when some API provides us HTML content as string. Remove All HTML tags using RegEx String html = '<h2>Articles:</h2> <div class="subtitle">This is orkitt.com <br/><span>Its more than Blog</span></div>'; RegExp exp = RegExp(r"<[^>]*>",multiLine: true,caseSensitive: true);String parsedhtml = html.replaceAll(exp, ' ');print(parsedhtml);//output with spaceString parsedstring1 = html.replaceAll(exp, '');print(parsedstring1);//output without space Check the Output Using this regular Expression you can remove any html tags from string. Hope this helpful for you.

What is Layout Builder? Flutter Layout Builder is a Method that Builds a widget tree based on it's  parent widget's max size. By using this , you can build responsive UI for your Flutter App. In this guide you will learn how to use Layout builder on Flutter and build a responsive UI. Difference between MediaQuery and LayoutBuilder The main difference between MediaQuery and LayoutBuilder in Flutter is MediaQuery uses the complete context of the screen but Layout Builder uses it's parent Widget Size. For making a responsive UI , we need both of them. But in this tutorial  we are going to implement LayoutBuilder. Flutter LayoutBuilder As I told you, LayoutBuilder is a method of Flutter. So it has a return type. Here the Return type is a Widget or Widget Tree. Look at the example below. LayoutBuilder(           builder: (context, size) {             final getWidth = size.maxWidth;            ...

What is Stack in Flutter? Stack and Positioned Widget allows us to make a layer of widgets by putting them on top of each other. In this article we will learn about Stack and Positioned Widget and How to Implement in our Project. Stack Widget Stack is the parent of all the widget that we want to put as a layer. Stack contain children of widgets. The child widget in a stack can be either positioned or non-positioned like container or others.  We can use the alignment attribute to change the alignment of the widgets which non-positioned.  Stack places the children widgets in order with the first child being at the bottom and the last child being at the top.  How to use Stack Widget The below example helps to understand the use of stack widget quickly. Now look at the result of this code here to understand the concept. Hope you understand the uses of stack widget. So let's use positioned widget.   Positioned Widget Positioned widgets are use to specify the position of ...

The Linux Way Some people prefer the comfort of command to graphics. If you're one of these people then you should definitely install Scoop package manager on your windows OS. With Scoop, you can install programs using commands, just like Linux. What Is Scoop? Scoop is a command-line programme installer for Windows Operating System. Using Scoop, you can install programs and plugins for your computer using terminal. Scoop is a great tool if you're a Linux user who has switched to Windows, as it lets you install programs using command in terminal. Similarity In Linux, there are many package manager based on different distros. Like pacman, apt , dnf etc. But when we are talking about windows, there are no good package manager like that. What they have ? a graphical installer. But now , here comes scoop. This is different from choco. On linux your command look like this: sudo apt-get install (package-name) After installing Scoop, you can install using scoop install (package-name) H...

Flutter Carousel Carousel slider is a slideshow component for displaying images or texts or any widget in a slider. Flutter provides many carousel slider package to use carousel widgets in apps.  In this article you will learn, How to impliment carousel slider into your app with 5+ animated indicator and effects. Add  Dependencies Create a new Flutter project and open it on Visual Studio Code. Now, First of all add dependencies and packages. Go to pubspec.yaml and add this lines.   carousel_slider: ^4.1.1   smooth_page_indicator: ^1.0.0+2 We are going to show some images on our slider from the internet, If you want show images locally then declears assests foldes and run pub get commands. Create Image Lists Create a statefull widget . Now on this widget , create a list variable with the name of imglist and also declear a slider index intiger variable as we have shown below. List imglist = [ "https://wonderfulengineering.com/wp-content/uploads/2016/01/nature-wal...

The constructor is like a function with or without parameter but it doesn’t have a return type. That's why you can create new object using this constructor. In this tutorial we will discuss about how to use constructor and as a bonus we also provide you a great tool to generate constructor. Constructor in Dart There are many types of Constructors that you will need to know when working with Dart class. For example, this is Student class with constructor that has the same name: class Student { String name; int age; String location; // constructor Customer(String name, int age, String location) { this.name = name; this.age = age; this.location = location; } } Now you can create new object using this Student constructor. var student = Student("Jhon Wick", 26, "US"); Constructor in Flutter We know constructor dosen't have any return type , that's why it can be used to transfer variable from one widget to another. You can also pass va...

In this tutorial we are going to Animate Flutter Widget without 3rd party package. After completing this sort tutorial, You will be able to animate any widget in your Flutter App. Getting Started To continue  this tutorial, First of all create a flutter project and open it on VS Code or android Studio. In this tutorial we are going to create an Animated splash screen without 3rd party package to learn Animated Builder easily. Now create a statefull widget into a new dart file and name it splash.dart Import Packages We have to import two additional flutter package. Import those packages. import 'dart:async'; import 'dart:math' as math; Extends Statefull Widget Animated builder also needs to extends statefull widget with TickerProviderMixin. So let's extends our statefull widget with Ticker Provider Mixin. Add below line on State extends Class of our statefull widget. with TickerProviderStateMixin  So the code will look like this. Hope you got it. Add Animation Contro...

Hello Folks, In this tutorial we are going to impliment an Animated Pie Chart or Donut Chart on our Flutter Project. To do this, create a new project or start from our pie chart project. You can show data from API as well as local. So let's start, Add Dependency After creating your project simply add this package by applying the command below. flutter pub add pie_chart It will add Pie Chart to your project. Now let's Implimnet it into our Project. Import Pie Chart  Create a dart file with statefull widget. For example purpose, we are creating pie.dart with statefull widget named MyChart . Now import this line. import 'package:pie_chart/pie_chart.dart'; Creating Pie Chart  Pie Chart supports double value for its items in data map. Here is the example of our Simple Pie Chart. There are other option we will teach you soon. It is the basic. Now lets set colors for our Pie Chart. Before widget build , declear a color list. Here we are using our custom color list. final pie...

In this article, we're going to show you how you can read and parse complex nested JSON files locally with Model Class. By following this tutorial you will be able to any kind of JSON File in your app easily. What is Nested Json ? Nested JSON is simply a JSON file with a very big portion of its values being other JSON objects. That's means a json object hold another or many json object inside it.  Simply it's  a JSON Family.🙃 Here is a Demo Image we will use for this example. Add local Json to Flutter Assets: Go to your assets folder and create a file name it nested.json or anything you want with .json extension. Now copy the json code from here and paste it into nested.json file.  So we get a local json as assets. Declear is as an assets on pubspec.yaml file as we did in our previous tutorial . Or you can Download full sourec code from below. Create Model Class for Json in Flutter Now we will create a model class to Parse our json file. For that goto our json...

There are two orientations, i.e Landscape mode and Portrait mode. Flutter uses system default mode or follow the sensor for screen rotation. After reading this article you will be able to set your Flutter app orentation and make it portrait or landscape easily. See the example below and learn how to set Orientation. Set Portrait Mode of Flutter App Orentation depends on Flutter Service package. So first of all import the service package. import 'package:flutter/services.dart'; Now Add this lines of code on main.dart file. void main() { WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, /* DeviceOrientation.portraitup, */ DeviceOrientation.portraitDown, ]).then((value) => runApp(MyApp())); runApp(MyApp()); } Set Landscape Mode of Flutter App Now, chan this values to set your app into Landscape Mode. SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, DeviceOrientatio...

Sometimes you need to track the location of your relatives, kids and elders as well. There are many to do it. But In this tutorial we are going to share a way to trace someone location by sending an sms or photo or a music. So let's start with Grabify. Track Cell phone Location By SMS with Grabify First of all create an account on  Grabify  . Grabify is a IP logger tool. It grab user id when any user click on a link. Now move to our next step. Get the link (URL) of anything you want to send like wallpaper, music, video, etc. Simply search for a wallpaper or somthing on google and copy the link. It will be better if send him a link that he/she might interested in.  Go to Grabify home page. There you will see a box where you can paste url. So, paste the copied url in that box and click on create url. After this, URL will be created and you will be redirected to the page where you will see new URLs. Get IP Address by SMS Now copy the newly generated URL or google URL (...

Tailwind CSS, a Modern CSS framework developed by the Tailwind project. It can work with Tailwind Cli and CDN.Tailwind CSS can best be described as a “utility-first” framework. Utility-first frameworks are composed of small, simple classes that can be applied to elements to create a user interface.  Tailwind offers predesigned widgets to build a site from scratch while Bootstrap comes with a set of pre-styled responsive design. As you go through this tutorial, you can make your own project with tailwind css. If you are new to Tailwind CSS and want to Learn, this blog will help you with easy explanination. Setup Tailwind CSS Tailwind can be used as Bootstrap with CDN. For that you need to add java script to your HTML document before colosing headtag . CDN is designed for development purposes only, and is not the best choice for production. IN this tutorial we will install Tailwind Client. Tailwind CDN [Not Recommended] Add the Play CDN script tag to the <head> of your HTM...

Flutter is a mobile app SDK for building high-quality native interfaces on iOS and Android. If you are a developer and also a Linux lover then you can use flutter on your system as well. Here we will show you how to install flutter on Linux. This guide is tested on Ubuntu 22.04 LTS , PopOS, Fedora 36 Workstation , Cutefish OS using Flutter 3.0.5 stable version.  What will you get after reading this article. Able to install flutter on any linux based distro. Install flutter without android studio. Install android sdk toolchain and also for linux. How to Setup Flutter on Linux This Guide will walk you through to the installation of Flutter to your Linux Machine. We are not installing Android Studio, we will set flutter up to Visual Studio Code. Basically we need - Flutter , Java JDK , Andoid SDK Toolchain. So let's install. Download Flutter 3.0.5 Let's download the latest version of Flutter.Hit on Flutter Official Page and download the stable version of Flutter. Currently flutte...

Best android Emulator For Linux Redhat based distro like Fedora 36 is Waydroid. Why it is best? Because it has latest Android 10, Lineage OS Rom, very smooth and fast to run. Desktop icon integration makes it cool.  You will get all installed android app icon on your Desktop / Launcher too. If you want to read more click here, we have another article for Waydroid Features. Now let's walk through our installation guide. For ubuntu user read this installation guide.  Wayroid Android 10 for Fedora Recently I have installed Waydroid on my Fedora 36 workstation. To install it on your PC, please follow this instruction carefully. Enable Waydroid Repo sudo dnf copr enable aleasto/waydroid It will enable Aleasto Repository for installing Waydroid on your Fedora. Now run this installation command. Install Waydroid Fedora sudo dnf install waydroid Intialize Waydroid Varient For Vanilla : sudo waydroid init -c https://ota.waydro.id/system -v https://ota.waydro.id/vendor For GAPPS : sudo...