Posts

Showing posts with the label Tutorial

How to Convert HTML as Custom Widget in Flutter

Image
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 ...
Post a Comment
What's New »

Stack and Positioned Widget in Flutter

Image
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 ...
Post a Comment
What's New »

Create Your First Project with Tailwind CSS

Image
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...
Post a Comment
What's New »

Install Chrome on Ubuntu

Image
Google Chrome is a web browser developed by Google. It’s open source, so it is available on Linux, macOS and Windows. This tutorial shows how to install the latest version of Google Chrome in Ubuntu 22.4,  20.4 LTS or 18.04 LTS, Ubuntu 17.10 and 16.04 LTS systems using Terminal. Best Browser For Ubuntu: For those who don’t know, Google Chrome is one of the most popular web browsers out there, with over 2 billion users worldwide. It’s fast, secure, and easy to use. Many users also like how it syncs your settings across all devices so that you can access your bookmarks and passwords from any computer or mobile device that has Chrome installed. How do I install Chrome from terminal? The first thing you need to do is open up a terminal window. To do so, press Ctrl + Alt + T on your keyboard. Now, type the command below and hit Enter. sudo apt install google-chrome-stable You will be prompted for your password (enter it if you have an admin account). Press Enter again when asked whether...
Post a Comment
What's New »

Flutter Create New Project with Package Name

Image
The default Flutter project created by an IDE includes the company domain, in reverse order, followed by the project name. The package name is the unique identifier of your app and it is used to determine where an app is installed on a device. Therefore, it is important to have a meaningful package name for your flutter application. By default, the package name for your flutter project will be com.example.projectName. We will use our own custom package name while creating a new flutter app/project. Easy way of creating Flutter Project: We already know how to create a project with normal way. If you don't know how to create flutter project I'm going to show you how to do it. Open your terminal and go to your desktop folder or any where you want to locate your new project. Type following command flutter create my_app cd my_app flutter run  Or, to open on VS Code type "code my_app" Create Professional Flutter Project: As I mentioned before this is the normal way of creat...
Post a Comment
What's New »

Flutter Search ListView - Listview Filter

Image
Search option in app is mandatory to make your app user friendly. Adding Search functionality to your Flutter app is very easy. This example demonstrates a search widget consuming and displaying data from a list of items. This is a very basic implementation of search in a list . This demo implements search in list enabling the users to choose any text from a list and perform search within the chosen text. How Flutter Search Works?   Flutter provides a simple (but powerful) way to embed a search box in your app. Searching is decoupled from the source of the data, so your search implementation can improve without affecting your underlying data layer. In order to add a search option to your list, you will need a TextEditingController instance. The recommended way to obtain one is through a call to getControllerWithInitialQuery . You then configure an instance of this controller with your query string and its desired icon.I'm going to walk you through the process of implementing search...
Post a Comment
What's New »