Introduction to Flutter Concepts: Understanding the Foundation of Flutter Development(Widgets)

Welcome to the exciting world of Flutter! You're in the right place if you’ve been curious about building cross-platform mobile applications efficiently and with stunning user interfaces. In this blog post, I will introduce you to the fundamental concepts of Flutter, providing you with a solid foundation to kickstart your journey in Flutter development.

What is Flutter?

Flutter is an open-source UI toolkit developed by Google for crafting high-quality natively compiled applications for mobile, web, and desktop platforms. It empowers developers to build beautiful and performant user interfaces using a single codebase.

Widgets: The Building Blocks of Flutter

At the core of Flutter lies the concept of widgets. In Flutter, everything is a widget! Widgets are the building blocks of your user interface and can represent anything, from a simple button to an entire screen. Flutter offers a vast collection of widgets that you can use to construct your app’s UI hierarchy.

1: Decide on the Widget Type: The first step is to decide on the widget which will be used. This is selected based on its purpose. Flutter offers two main types of widgets: stateless and stateful.

• Use a stateless widget if your widget doesn’t require internal state management. Stateless widgets are immutable and their properties do not change over time.
• Use a stateful widget if your widget needs to maintain an internal state that can change dynamically.

2: Create a New Dart File: The next thing to do is to create a new Dart file to define your custom widget. Right-click on the lib directory within your project structure and select “New File”. Provide a meaningful name for the file, following Flutter’s naming conventions (e.g., my_custom_widget.dart).

3: Import Flutter Material or Cupertino Package: Depending on the design aesthetics you want to achieve, you can choose to import either the material.dart package or the cupertino.dart package at the top of your Dart file. For most systems, by default, material.dart is automatically generated when creating a Flutter app. You can decide to change it depending on the design aesthetics you want. For example:

Here, I used the material.dart

import 'package:flutter/material.dart';

4: Define the Widget Class: Define a class that extends either StatelessWidget or StatefulWidget, based on the type of widget you want.

• For a stateless widget, define a class that extends StatelessWidget. Override the build method to return the widget's UI representation. For example:

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Widget properties and child widgets
    );
  }
}

. For a stateful widget, define a class that extends StatefulWidget. Create a corresponding state class that extends State<MyCustomWidget>. Override the build method within the state class to return the widget's UI representation. For example:

class MyCustomWidget extends StatefulWidget {
  @override
  _MyCustomWidgetState createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Widget properties and child widgets
    );
  }
}

5: Implement Widget Properties and Child Widgets: Now, you will have to customize your widget by adding properties, parameters, or constructor arguments to accept data or configuration. You can also define child widgets within the widget’s build method to structure the UI hierarchy.

6: Use the Custom Widget: You can now use your custom widget in other parts of my app. Import the file where you want to use the widget and include it within the desired widget tree.

I will be writing a simple widget code:

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const MyCustomWidget({
    Key? key, required this.text, required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        textStyle: const TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

In this example, the MyCustomWidget widget is a stateless widget that accepts two required parameters: text and onPressed. The text parameter represents the text that will be displayed on the button, while the onPressed parameter is a callback function that will be executed when the button is pressed.

The build method returns an ElevatedButton widget from the Material package. It uses the provided text and onPressed parameters to configure the button's label and behaviour. The style property is used to customize the button's appearance, setting the background colour to blue and the text style to bold with a font size of 16.

For me to use this MyCustomWidget widget in my app, I can simply import the file where I defined it and use it like any other built-in Flutter widget. Here's an example of how I used the MyCustomWidget widget within a Scaffold:

import 'package:flutter/material.dart';

import 'my_custom_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My first widget example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ShowMyFirstWidget(),
    );
  }
}

class ShowMyFirstWidget extends StatelessWidget {
  const ShowMyFirstWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Custom widget example'),
      ),
      body: Center(
        child: MyCustomWidget(
          text: 'Press Me',
          onPressed: () {
            print('Button Pressed!');
          },
        ),
      ),
    );
  }
}

In this example, the MyCustomWidget is used within the ShowMyFirstWidget's body. The button displays the text "Press Me" and prints a message to the console when pressed.

Feel free to modify and enhance the MyCustomWidget widget according to your specific requirements. As you become more comfortable with Flutter, you can explore more advanced features and expand the functionality of your custom widgets.

Conclusion

Congratulations! You now have a solid understanding of the key concepts that form the foundation of Flutter development. With this knowledge, you are well-equipped to dive deeper into building remarkable cross-platform applications using Flutter.

In the next blog post, I will put these concepts into practice as I will guide us through building our first Flutter app. Stay tuned, and let your creativity soar as you embark on your Flutter journey!

Zip it now!