Skip to main content

Posts

Showing posts with the label Widget example in flutter

Flutter SingleChildScrollView

What is SingleChildScrollView? To create a simple vertical ScrollView which can contain different types of widgets with different behavior we would use SingleChildScrollView Widget.SingleChildScrollView Widget is a box that can scroll a single widget. Widget In the below example code snippet we are creating a function called _createContainer() that accepts Color and text as an argument and it returns Container() widget with height: 200 pixels. We will reuse this widget many times in the Column. Without SingleChildScrollView Now we are creating a Column widget and add some containers to it with the use of creating widget function _createContainer(). If you run this code snippet in your app, the column will look like this as shown in the image below. With SingleChildScrollView Now we are wrapping the Column widget with a SingleChildScrollView scrolling widget, the information on the page should scroll and not showing any error. If you run this code snippet in your app, the colu...

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

What is Widget ? Types of Widget

What is Widget? In Flutter, we interact with the UI so the whole UI is made up of Widgets. If you are known to Android and Ios so in that we are using Views and UIViews same as in flutter it's called Widget but  - The widget is not only about view it is more than that.  Widgets describe what their view should look like given their current configuration and state. Types of Widgets :  Before we are discussing types of widgets first will know about State and what is the function we can use in that. What is State? - According to Flutter, State is information that can be read synchronously when the widget is built and might change during the lifetime of the widget.  - It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes with the use of function State.setState. State objects are created by the framework by calling the StatefulWidget.createState. A widget can be either a stateless widget or a stateful widge...