Widgets in Flutter

- Andrés Cruz

En español
Widgets in Flutter

Flutter was developed by Google to make sure there isn't a steep learning curve for an iOS developer or an Android developer when they want to go cross-platform.

Widgets are an essential part of the Flutter framework, which is a popular mobile app development platform created by Google. Flutter uses a widget-based approach to building apps, which means that the user interface (UI) is created by assembling widgets in a tree-like structure. Each widget represents a different visual element of the UI, such as buttons, text fields, images, and more. By combining these widgets, developers can create complex and dynamic UIs that are both visually appealing and easy to use.

One of the main benefits of using widgets in Flutter is that they are highly customizable and offer a wide range of functionality. Developers can use pre-built widgets that are included with the framework, or they can create their own custom widgets to meet specific design requirements. With Flutter, developers have access to a vast library of widgets that can be easily customized to fit the look and feel of their app.

There were pre-built widgets so developers didn't have to spend hours thinking about which code base to copy to the notepad and vice versa.

The core idea behind a widget is that once you've created your user interface using widgets, you can use these widgets to describe what the view should look like, along with its settings and state.

See how we can use a simple Flutter app to call the runapp() function with a widget; the minimal Flutter app simply calls the runApp() function with a widget:

import 'package:flutter/material.dart' ;

void main () {
 runApp(
     Center(
       child: Text(
         'Hello, world!'
         textDirection: TetDirection.ltr,
       ),
     ),
   );
}

The widget tree consists of two widgets, the center widget and its child, the text widget.
Some basic widgets are listed here for your immediate reference:

  • Text
  • Row
  • Column
  • Stack
  • Container

There is a lot of free information available on the official Flutter widgets page, which you can find here.

The functionalities of a widget consist of anything from an application-wide framework (scaffold widget) to a simple animation.

Creating your first widget

Each widget has its own unique purpose. Imagine if as a developer, you should code an "action button" for a shopping app. You can use the code base of a Dart programming language and create a complete application in no time.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.