Sliver is a portion of the scrollable area which is used to achieve a custom scrolling effect. In other words, the sliver widget is a slice of the viewport. We can implement all of the scrollable views, such as ListView, GridView using slivers. It is a lower-level interface that provides excellent control over implementing a scrollable area. It is useful while scrolling large numbers of children widgets in a scrollable area. As they are based on the viewport, it can change their shape, size, and extent based on several events and offset. Flutter provides several kinds of slivers, some of them are given below: How to use slivers? It is to note that all of the sliver’s components should always be placed inside a CustomScrollView. After that, we can combine the list of slivers to make the custom scrollable area. What is CustomScrollView? CustomScrollView in Flutter is a scroll view that allows us to create various scrolling effects such as grids, lists, and expanding headers. It has a sliver property where we can pass a list of widgets that include SliverAppBar, SliverToBoxAdapter, SliverList, and SliverGrid, etc. Let us discuss each sliver in detail. SliverAppBar SliverAppBar is a material design app bar in Flutter that integrates with a CustomScrollView. Generally, we used it as the first child of CustomScrollView. It can vary in height and float above the other widget of the scroll view. It allows us to create an app bar with various scrolling effects. Properties of SliverAppBar The following are the essential properties of the SliverAppBar: actions: This property is used to create widgets right of the appBar title. Generally, it is an iconButton that represents common operations. title: This property is used to define the title to the SliverAppBar. It is similar to the AppBar title to give the name of the application. leading: This property is used to define a widget left to the title. Generally, it is used to place the Menu Drawer widget. backgroundColor: This property is used to define a background color to the sliver app bar. bottom: This property is used to create space to the bottom of the title, where we can define any widget according to our needs. expandedHeight: This property is used to specify the maximum height to the app bar that can be expanded while scrolling. It must be defined in a double value. floating: This property determines whether the app bar will be visible or not when the user scrolls towards the app bar. flexibleSpace: This property is used to define a widget which is stacked behind the toolbar and the tab bar. Its height is the same as the app bar’s overall height. Example In the below example, we will see how to use the SliverAppBar with CustomScrollView. Output When we run the app, we should get the UI of the screen similar to the below screenshot: SliverList SliverList is a sliver that places the children in a linear array or one-dimensional array. It takes a delegate parameter to provide the items in the list in a way they will scroll into view. We can specify the children’s list using a SliverChildListDelegate or build them with a SliverChildBuilderDelegate. Example In the below example, we will see how to use the SliverList with CustomScrollView. Output When we run the app, we should get the UI of the screen similar to the below screenshot: SliverGrid SliverGrids places the children in a two-dimensional arrangement. It also uses a delegate to specify the children or an explicit list similar to the SliverList. But it has additional formatting to the cross-axis dimension on a grid. It allows the three ways to specify the grid layout: 1. It uses Count Constructor for counting the number of items in the horizontal axis. See the below code: 2. It uses Extent Constructor, which specifies the maximum width of the items. It is most useful when the grid items vary in size. It means we can limit how large space they should take up. See the below code: 3. It uses Default constructor which is pass in an explicit gridDelegate parameter: Example In the below example, we will see how to use the SliverGrid with CustomScrollView. Output When we run the app, we should get the UI of the screen similar to the following screenshot: SliverFixedExtentList and SliverToBoxAdapter A SliverFixedExtentList is a sliver that holds multiple children with the same main-axis extent in a one-dimensional array or linear array. It is more efficient than SliverList because there is no need to perform layouts on its children to obtain the main-axis extent. It does not allow a gap between its children. It requires each child to have the SliverConstraints.crossAxisExtent in the cross axis and the itemExtent property on the main-axis. A SliverToBoxAdapter is a sliver that can hold only a single box widget. It is useful when we want to display only a single child widget in CustomScrollView to create a custom scroll effect. If we need to display multiple box widgets in a CustomScrollView, we must use the SliverList, SliverFixedExtentList, or SliverGrid. Example In the below example, we will see how to use the SliverFixedExtentList and SliverToBoxAdapter with CustomScrollView. Output When we run the app, we should get the UI of the screen similar to the below screenshot:

A map is used to get information about the world simply and visually. It presents the world places by showing its shape and sizes, locations and distance between them. We can add a map in our application with the use of the Google Maps Flutter plugin. This plugin can automatically access the Google Maps servers, map display, and respond to user gestures. It also allows us to add markers to our map. Why use Google Maps with Flutter? Flutter developers prefer Google Maps for their application because they provide native performance for android and iOS both. It allows us to implement the code one time and permit them to run the code for both devices (android and iOS). Google Maps Flutter plugin is provided in the Google Map widget that supports initialCameraPosition, maptype and onMapCreated. We can set the position of the camera and marker in any place on the earth. We can design the marker according to our choice. It also comes with a zoom property in a cameraposition to provide the zooming in google map view on the initial page. Let us see step by step to how to add Google Maps in Flutter application. Step 1: Create a new project. Open this project in the IDE, navigate to the lib folder, and then open the pubspec.yaml file for setting the map. Step 2: In pubspec.yaml file, we need to add the Google Maps Flutter plugin in the dependency section, which is available as google_maps_flutter on pub.dartlang.org. After adding a dependency, click on the get package link to import the library in the main.dart file. It ensures that we have left two spaces from the left side of a google_maps_flutter dependency while adding the dependencies. Step 3: The next step is to get an API key for your project. If we are using an Android platform, then follow the instructions given on Maps SDK for Android: Get API Key. After creating the API key, add it to the application manifest file. We can find this file by navigating to android/app/src/main/AndroidManifest.xml as follows: Step 4: Next, import the package in the dart file as below: Step 5: Now, we are ready to add a GoogleMap widget to start creating a UI to display the map. Example Let us understand it with the help of an example. In the above code, we have noticed these terms: mapController: It is similar to other controllers that we had seen in Flutter. It controls all activities on the GoogleMap class. Here, it manages the camera function, such as position, animation, zooming, etc. onMapCreated: It is a method called for creating a map and takes a MapController as an argument. initialCameraPosition: It is a required parameter that sets the camera position from where we want to start. It allows us to set which part of the world we want to point on the map. stack: It is used to place other Flutter widgets on top of the map widget. Output: When we run the app, it should return the UI of the screen as below screenshot: How to change the map appearance? We can change the map appearance such as normal view, satellite view, etc. using mapType property. This property allows developers to display the type of map tiles. The GoogleMap widget offers mainly five types of tiles, which are given below: We can do this by creating a variable _currentMapType in the above code to display the current map type and then add mapType: _currentMapType to the GoogleMap widget. Next, we have to add a method to modify the value of _currentMapType inside a setState() function call. This method will update the map appearance for matching with the new value of _currentMapType variable. Finally, replace the onPressed property with _onMapTypeButtonPressed. Let us see the complete code to change the map appearance. Open the dart file and replace it with the below code: Output: When we run the app, it should return the UI of the screen as below screenshot: If we click on the map icon, we will get the satellite image of our specified location. See the below image: How to add a marker on the map? A marker identifies the location on the map. We can add a marker on a map by using the markers property inside the GoogleMap widget. Generally, the marker is shown when we move our camera from one location to another. For example, if we want to move from Poland to California, we can see a marker on that particular location when the camera moves to California. We can add a marker by creating a variable _markers that will store the map’s markers and then set this variable as the markers property in the GoogleMap widget. Next, it is required to track the current camera position on the map by adding the below code: Finally, we need to add a marker in the map by modifying the _markers inside a setState() function call. Let us see the complete code to add marker to the map. Open the dart file and replace it with the below code: Output: Run the app, and we will get the UI of the screen as the first screenshot. When we click on the button, it displays the marker at the last location on the map. When we tapped the marker, the information is displayed that gives a title and snippet about the location.

A splash screen is a launch screen, start screen, or boot screen, which is a graphical control element containing the image, logo, and current version of the software. It is the first screen of the app that displays whenever the application is loading. It can also be the app’s welcome screen that provides a simple initial experience when a mobile game or program is launching. The splash screen is just a display screen that allows users to look something while the hardware is loading to present software to the user. The common elements of a splash screen contain a company name and logo or a title. The most common example of a splash screen is the Flutter logo on starting the Flutter application or Microsoft logo while starting the Microsoft operating system. In this tutorial, we are going to see how a splash screen is created in Flutter application. Splash Screen Characteristics The following are the essential characteristics of the splash screen: Here we are going to explain two methods to add a splash screen in our application. Method 1: In the first method, we will implement the Timer() function to create a splash screen in our app. First, create a new project in the IDE you are using. Open the project, navigate to the lib folder, and replace the below code with the main.dart file. In the above code, we have a method initState() called once when the stateful widget is inserted in the widget tree. This method first called the super.initState() and then the Timer function. The timer function contains two arguments where the first is duration, and the second is action to be performed. We have specified duration time five seconds, and after completing the time, the current screen will be replaced with the main screen of the app, i.e., HomeScreen(). Output: When we open the app, we will see the flutter logo first for 5 seconds, shown in the below screenshot. After completing the 5 seconds, it will display our application’s home screen shown in the below screenshot. Method 2: In the second method, we will use a splashscreen package to create a splash screen in our app. This package provides many attributes that are given below: First, create a new project in the IDE you are using. Open the project, navigate to the lib folder, and open the pubspec.yaml file where we need to add the splashscreen dependency as below: Now, open the main.dart file and replace it with the below code. In the above code, we have a home page as SplashScreenPage() that will return the SplashScreen class. This class has several properties for displaying the splash screen, such as title, image, backgroundcolor, gradientBackground, seconds, loadingText, etc. The second property is used for how much time the splash screen appears to the user, and after completion, it will navigate to a new screen, i.e., HomeScreen() in our app. Output: When we open the app, we will see the image and loading icon first for 5 seconds, shown in the below screenshot. When the specified time completes, we will navigate to the main page of the application.

A package is a namespace that contains a group of similar types of classes, interfaces, and sub-packages. We can think of packages as similar to different folders on our computers where we might keep movies in one folder, images in another folder, software in another folder, etc. In Flutter, Dart organizes and shares a set of functionality through a package. Flutter always supports shared packages, which is contributed by other developers to the Flutter and Dart ecosystem. The packages allow us to build the app without having to develop everything from scratch. The general structure of the package is given below (Assume a demo package as mycustom_package): lib/src/*: It contains private Dart code files. lib/mydemo_package.dart: It is a main Dart code file. We can import it into an application as below: We can also export any other code file into the main code file as below syntax: lib/*: It is a directory, which contains the public code in the package. We can access this code as below: pubspec.yaml: It is the project’s configuration file that will use a lot during working with the Flutter project. This file contains: Types of Packages According to the functionality, we can categorize the package into two types: Dart Package: It is a general package, which is written in the dart language, such as a path package. This package can be used in both the environment, either it is a web or mobile platform. It also contains some Flutter specific functionality and thus has a dependency on the Flutter framework, such as fluro package. Plugin Package: It is a specialized Dart package that includes an API written in Dart code and depends on the Flutter framework. It can be combined with a platform-specific implementation for an underlying platform such as Android (using Java or Kotlin), and iOS (using Objective C or Swift). The example of this package is the battery and image picker plugin package. Develop a Flutter Package or Plugin Developing a Flutter plugin or package is similar to creating a Dart application or Dart package. But, it has some exceptions means plugin always uses system API specific to a platform such as Android or iOS to get the required functionality. Now, let us see step by step how to develop a package in Flutter. Step 1: First, open the Android Studio and click on File menu -> Select a New Flutter Project. A dialog box will appear on your screen. Step 2: In this dialog box, you need to select a New Flutter Project option, as shown in the image below, and click on Next. Step 3: In the next dialog box, enter all the details of your package, such as project name, location of your project, and project description. After filling all the details, click on Finish. Step 4: Finally, your project is created. Now, open the flutter_custom_package.dart file and delete the default code created at the time of project creation. Then insert the following code. This code snippet creates an alert box package. Now, you need to test your newly created package. To test the package, create a new project. In this project, first, open the pubspec.yaml file and the following code in the dependency section. When you add the custom package in pubspec.yaml file, Android Studio will alert you to update this file. To update the file, click on the Get dependencies and make sure that you have an internet connection during updating of file. The Android Studio automatically get the package from the internet and configure it for your application. Now, you are able to use this package. You can import the package in the dart file as below line: How to Publish a Package When you have successfully implemented a package, you can publish it on the pub.dev, so that anyone can use it easily in the project. Before publishing the package, make sure that the content of pubspec.yaml, README.md, and CHANGELOG.md file is complete and correct. Next, run the following command in the terminal window to analyze every phase of the package. Finally, you need to run the following command to publish the package.