This article shows you how to use Ant Design Buttons in a React application. 1. Install the required package Install the icon package (optional): 2. Import the packages into your React code 3. Implement some buttons…

This article shows you how to use Ant Design Icons in a React.js project. 1. Install the required package: 2. Import the icons you need, for example: Note: To see the full list of available icons,…

To calculate the height of the CupertinoNavigationBar, we store it in a variable called _myNavBar (the name doesn’t matter) then use: Example Output: That’s it! Happy Fluttering 🙂

In Flutter, CupertinoPicker is an iOS-style widget that displays its children widgets on a wheel for selection. To show the CupertinoPicker, we can use the showCupertinoModalPopup or showCupertinoDialog function. Sample code: The Complete Example This tiny…

There’re several plugins that can make our lives much easier when working with line charts in Flutter. In this tutorial, we’ll use fl_chart, one of the most-used chart plugins these days. Installation 1. Add fl_chart: ^0.12.0…

In Flutter, you can easily implement a bottom tab bar by using the built-in widget named BottomNavigationBar. Example To demonstrate how to work with BottomNavigationBar, we’ll build a tiny Flutter app that contains 2 screens (ScreenA…

In Flutter, you can access variables from stateful widget class with the widget keyword like this: But in some cases, you may need to get the variables from the stateful widget before Widget build(BuildContext context). How…

In Flutter, we can use the GridTile widget to display text over an image. This method is easier to implement but less customizable than using the Stack widget. Related article: Placing text over an image with…

In this example, we’ll create a sample Fluter app that displays an image from the internet. When the user long presses on the image, the Cupertino Context Menu (an iOS-style context menu) will show up with…

There’re several plugins that can help us easily make circle charts (pie chart) in Flutter. In this tutorial, we’ll use fl_chart, one of the most popular chart plugins on pub.dev. Getting Started 1. Find the dependencies…

To show a dialog in Flutter, you can use the built-in showDialog() function and the Dialog widget. Simple implementation: To close the dialog, just use (the user can also close the dialog by tap somewhere outside…

There’re several ways to create a rounded corners button in Flutter. Example 1: Using ElevatedButton The code: Output: Example 2: Using InkWell The code: Output: Example 3: Using OutlinedButton The code: Output: Example 4: Using GestureDetector…

In Flutter, you can get the device screen width by using: To get the screen height, use: Example Full code in main.dart: Output: Hope this helps!

In Flutter, the Banner widget is used to display a diagonal message above one corner of another widget. Example The code: Output: Hope this helps!

To use the Timer class in Dart, don’t forget to import the dart:async package. Example Hope this helps!

A few examples of the ListTile widgets in Flutter. Example 1 (Simple) The code: Output: Example 2: Using ListTile with ListVIew.builder The code: Output: Hope it helps!

To check if a date is between 2 other ones in Flutter and Dart, you can use the isBefore() and isAfter() methods of the DateTime class. Example Output: