Flutter Dropbox

Posted onby admin

GetFlutter is a 100% free Flutter open-source UI library built with Flutter SDK to make Flutter development easier and more Apps A Demo application which stores User feedback from Flutter application into Google Sheets using Google AppScript. While there are companies using Flutter or React Native, Dropbox dropped their multi-platform technology (C) because of “The (not so) hidden cost of sharing code between iOS and Android”.

A grid view is a graphical control element used to show items in the tabular form. In this section, we are going to learn how to render items in a grid view in the Flutter application.

GridView is a widget in Flutter that displays the items in a 2-D array (two-dimensional rows and columns). As the name suggests, it will be used when we want to show items in a Grid. We can select the desired item from the grid list by tapping on them. This widget can contain text, images, icons, etc. to display in a grid layout depending on the user requirement. It is also referred to as a scrollable 2-D array of widgets. Since it is scrollable, we can specify the direction only in which it scrolls.

The grid view can be implemented in various ways, which are given below:

  1. custom()

Let us discuss all of the above in detail.

GridView.count()

It is the most frequently used grid layout in Flutter because here, we already know the grid's size. It allows developers to specify the fixed number of rows and columns. The GriedView.count() contains the following properties:

crossAxisCount: It is used to specify the number of columns in a grid view.

crossAxisSpacing: It is used to specify the number of pixels between each child widget listed in the cross axis.

mainAxisSpacing: It is used to specify the number of pixels between each child widget listed in the main axis.

padding(EdgeInsetsGeometry): It is used to specify the space around the whole list of widgets.

scrollDirection: It is used to specify the direction in which the items on GridView scrolls. By default, it scrolls in a vertical direction.

reverse: If it is true, it will reverse the list in the opposite direction along the main axis.

physics: It is used to determine how the list behaves when the user reaches the end or the start of the widget while scrolling.

shrinkWrap: If it is false, the scrollable list takes more space for scrolling in scroll direction. It is not good because it wastage memory and reduces app performance. Therefore, we will wrap our children widgets using shrinkWrap by setting it to true to avoid memory leakage while scrolling.

Example

Let us understand it with an example to see how to create GridView in Flutter for creating grid lists. 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 created a class for the items that we want to show in the grid and then add some data. Next, we have constructed the widget that we are going to show in the GridView.

Output

Dropbox

When we run the app in Android Studio, we can see the following screen in our Emulator.

GridView.builder()

This property is used when we want to display data dynamically or on-demand. In other words, if the user wants to create a grid with a large (infinite) number of children, then they can use the GridView.builder() constructor with either a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent.

The common attributes of this widget are:

itemCount: It is used to define the amount of data to be displayed.

gridDelegate: It determines the grid or its divider. Its argument should not be null.

itemBuilder: It is used to create items that will be displayed on the grid view. It will be called only when the indices >= zero && indices < itemCount.

Example

Let us understand it with the help of an example. Open the project, navigate to the lib folder, and replace the below code with the main.dart file.

Output

When we run the app in Android Studio, we can see the following screen in our Emulator.

GridView.extent()

This property is used when we want to create a grid with custom extent values. It means each tile has a maximum cross-axis extent.

Example

Let us understand it with the help of an example. Open the project, navigate to the lib folder, and replace the below code with the main.dart file.

Output

When we run the app in Android Studio, we can see the following screen in our Emulator.

Flutter Dropbox Free


This Flutter tutorial shows you how to create DropdownButton in Flutter including how to updaate value and how to customize it.

If you have and input field and you want the users to select only from certain values, one of the most common input types is dropdown. In Fluter, it can be done easily using DropdownButton widget.

To use the widget, there are two required properties: items and onChanged. items is of type List<DropdownMenuItem<T>>, where T is the value type. It can be a number, a String or any other type. For each DropdownMenuItem, you need to define value and child. The value must be of type T which means it must be the same across all options. For example, if you construct with DropdownButton<String>, the value of all options must be String. child is the widget that will be rendered for that option item. onChanged is a function with one parameter.

Every time the value changes, it will be called with the new value as the argument. Inside onChanged, usually we update the state that stores the dropdown value.

There are two non-required options that you'll most likely use. First is value, which stores the current value. If the value matches a DropdownMenuItem's value, the option item will be displayed as selected item. It can be used to set initial value as well. The other option is hint, which is a widget that will be shown if no value selected.

For list of available options, see the table below.

Flutter Dropbox Login

OptionDescription
Key keyThe widget's key
List<DropdownMenuItem<T>>The options.
T valueThe current value.
Widget hintWidget that will be displayed if value is null.
Widget disableHintWidget that will be displayed if the dropdown is disabled.
(T) -> void onChangedFunction that will be exeucted every time the value changes.
int elevationZ-coordinate of the options.
TextStyle styleText style inside the dropdown.
Widget underlineWidget that will be used for drawing the drop-down button's underline. Default is 0.0 width bottom border with color 0xFFBDBDBD.
Widget iconThe dropdown's icon. Default is Icons.arrow_drop_down
Widget iconDisabledColorIcon color when it's disabled. If the thems' ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it's Brightness.dark, default is Colors.white70.
Widget iconEnabledColorIcon color when it's enabled. If the thems' ThemeData.brightness is Brightness.light, default is Colors.grey.shade700.. If it's Brightness.dark, default is Colors.white70.
double iconSizeThe icon size. Default is 24.0.
bool isDenseWhether to reduce the button's height. Default is false.
bool isExpandedWhether to set the dropdown's inner contents to horizontally fill its parent. Default is false.

Flutter Dropbox

Below is a custom DropdownButton example that uses custom TextStyle, underline as well as icon color and size. In addition, instead of using standard Text widget as DropdownMenuItem's child, it uses a Row that also contains an Icon.