Skip to main content

Posts

Showing posts from August, 2021

Master In Flutter ListViews

  What is ListView? ListViews are common in UI frameworks and are one of the most popular UI widgets. ListView is used to group several items in an array and display them in a scrollable list and the list can be scrolled vertically and horizontally. Here we are discussing two types of a listview with detailed examples and explanations. 1. Static ListView If you have a shortlist of items and the value of items and they are not changing in the future and static, then you can use the default ListView constructor to make it. Let's take an example in which we are defining the names of the days. In Listview we have ListTile widget which we can use as same as text widget in that we are showing the name of days and this is static so we have to define the length of the list for that we are using itemcount  property.   Horizontal ListView Default list view gives a scroll direction verticle if you want horizontal listview then you need to add property scroll direction is horizontal. 2

Flutter Images

Images We are going to know about how to add images in flutter application. A flutter app when built has both assets and code. Assets mean resources that are available and deployed during runtime. The asset is a file that can include static data, configuration files, icons, and images offline and also online. The Flutter app supports many image formats such as JPEG, WebP, PNG, GIF, animated WebP/GIF, and many more. We can add images in multiple ways here we are discussing two ways that are mainly used in the flutter. Image.assets When you have to set the images statically and display them in the app, you can use Image.assets() function. 1. Add an Image to the new folder The new folder is should be at the root of your flutter project. You can name it as per your preference, but assets are preferred. If you want to add other assets to your app, like fonts then it is preferred to make another subfolder named fonts, images. 2. Set image path Now you can copy your image to the images sub-fo

Types of Buttons In Flutter

Flutter Buttons Flutter has various types of buttons. Buttons are the Flutter widgets, which are a part of the material design library. So, here We are going to discuss different types of buttons and they can be placed anywhere in our UI as dialogs, forms, cards, and toolbars, AppBar and in many more places. Types of Flutter Buttons  1. TextButton Text Button is a Material Design button that comes without border or elevation change by default.TextButton is the replacement for FlatButton. We are clicking on TextButton then it is the same as Text and click effect if we want the Shadow, ButtonStyle, alignment, padding, and many more properties we can use as per our requirements. There are two required parameters. Of course, you have to pass a Widget as a child and onPressed. Taking an example that has text, style, and onPressed properties in style there are many properties we can customize like primary color, background color, surface, shape, and many more.  For defining a style for a spe

What is FocusNode in Flutter

What is FocusNode As per the name FocusNode so our basic idea is focusing on something but what? So, the answer is When a textField is selected and accepting input from a user at that time it is focused for that we have to tap on the textField but you do not need to do tapping without tapping you need to do focus on another TextField in that requirement you can use the FocusNode().  How to use the FocusNode with the example:- We are taking an example to Focus on the password text field on pressed of the floating Button Let's start with the following steps: 1. Create a FocusNode. we are starting with the create a FocusNode variable for the text field.  Note: you need to call dispose of the method of the FocusNode when you have finished using it and not further needed. This ensures that you discard any resources used by the object. 2. Pass the FocusNode to a TextField. In this, we have to pass the FocusNode in the specific text field which we are passing in the text field as per