Flutter: Bottom Sheet examples

October 22, 2020 Voldermort

Flutter: Drawer Navigation example

October 21, 2020 Voldermort

Using Ant Design Buttons with React.js

October 21, 2020 Linda Walker

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…

How to use Ant Design Icons with React.js

October 21, 2020 Ken Fisher

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,…

Flutter: Get CupertinoNavigationBar height

October 21, 2020 Voldermort

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 🙂

Flutter: CupertinoPicker example

October 21, 2020 Voldermort

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…

How to make Line Charts in Flutter

October 21, 2020 Voldermort

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…

Flutter: BottomNavigationBar example

October 21, 2020 Voldermort

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…

Flutter: Using widget.Variable before the build method

October 21, 2020 Voldermort

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…

Flutter: Display Text over Image without using Stack widget

October 21, 2020 Voldermort

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…

Flutter: Cupertino ContextMenu example

October 20, 2020 Voldermort

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…

How to create Circle Charts (Pie Charts) in Flutter

October 20, 2020 Goodman

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…

Working with Dialog in Flutter

October 20, 2020 Voldermort

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…

4 Flutter rounded button examples

October 20, 2020 Voldermort

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…

Flutter: Get Device Screen Width and Height

October 20, 2020 Voldermort

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!

Using the Banner widget in Flutter

October 20, 2020 Voldermort

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!

Using Timer in Dart

October 20, 2020 Voldermort

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

Flutter: ListTile examples

October 20, 2020 Voldermort

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!

Flutter & Dart: Check if a date is between 2 dates

October 20, 2020 Voldermort

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:

1 2 3 9