New in Flutter? These are fundamental knowledge of flutter widget that you must understand to start developing an application using Flutter.

Overview

Flutter is a powerful open-source UI framework developed by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. At its core, Flutter uses the Dart programming language and provides a rich set of pre-designed widgets to create beautiful and responsive UIs. One of its key features is “hot reload,” which allows developers to see changes in real-time without restarting the application. This makes Flutter an excellent choice for rapid development and iterative design. Because of these, understand about fundamental knowledge of flutter widget is more crucial to achieve that goals.

The building block of any Flutter application is the widget. Widgets describe what the application looks like and are organized in a tree structure. Flutter provides two main types of widgets: StatelessWidget and StatefulWidget. A StatelessWidget is immutable and doesn’t hold any state, while a StatefulWidget can hold state and rebuild itself when the state changes.

Stateless Widget

Stateless Widget is used to handle immutable components. This is example of it.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Basics')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

In the example above, MyApp is a StatelessWidget that displays a centered text inside a Material Design scaffold.

Stateful Widget

To handle interactive features or dynamic content, you can use a StatefulWidget. For example, the following code demonstrates a button that updates a counter:

import 'package:flutter/material.dart';

void main() => runApp(CounterApp());

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('You have pressed the button this many times:'),
              Text('$_counter', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Closing

Futter’s widget-based architecture and intuitive design principles make it easy to build complex applications. Whether you’re a beginner or an experienced developer, fundamental knowledge of flutter widget that using StatelessWidget and StatefulWidget is crucial to creating effective and interactive Flutter applications.

For learning flutter from official website, go here https://flutter.dev

For first step to start development you can follow these steps.