By:

Getting Started with Flutter: Simple example

August 21, 2023Article, Education, Programming

Introduction:

Flutter is a versatile and powerful open-source UI (User Interface) toolkit developed by Google, enabling developers to create high-quality native applications for mobile, web, and desktop platforms from a single codebase.

Components of Flutter:

  1. Widgets: Widgets are the building blocks of a Flutter app’s UI. They can be divided into two types: StatelessWidgets, which don’t change over time, and StatefulWidgets, which can be updated over time in response to user actions or data changes.
  2. Material Design and Cupertino Widgets: Flutter provides a set of widgets based on the Material Design guidelines for Android apps and Cupertino-style widgets for iOS apps. This makes it easy to create platform-specific UI elements.
  3. Layouts: Flutter offers a variety of layout widgets like rows, columns, grids, and stacks, which help in arranging and structuring the UI elements effectively.
  4. Navigation: Flutter simplifies navigation between different screens using Navigator and Routes. It enables smooth transitions and page management.
  5. Animations: Flutter supports both simple and complex animations using the Animation and AnimationController classes. You can create engaging visual effects and transitions.
  6. State Management: Flutter offers various state management solutions to manage and share data between different parts of the app efficiently. Some popular choices include Provider, Bloc, and MobX.
  7. Packages and Plugins: The Flutter ecosystem includes a wide range of packages and plugins that provide additional functionality, such as working with databases, handling HTTP requests, integrating with maps, and much more.

Simple Program having text with the background.

 

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.teal,
            child: Center(
              child: Text('Hello world'),
            ),
          ),
        )
    );
  }
}
Output

Related Posts