Skip to main content

Flutter and Dart Tutorial

Flutter is an open-source UI software development kit created by Google, allowing developers to create cross-platform applications with a single codebase. It uses Dart as its programming language. This tutorial will guide you through setting up Flutter and Dart, creating a simple Flutter application, and understanding the basics of Flutter widgets.

Prerequisites​

  1. Flutter SDK: Download and install the Flutter SDK from the Flutter website.
  2. Dart SDK: Dart comes bundled with Flutter, so you don’t need to install it separately.
  3. Editor: Use Visual Studio Code or Android Studio with the Flutter and Dart plugins.

1. Setting Up the Flutter Environment​

Step 1: Install Flutter​

  1. Follow the installation guide for your operating system (Windows, macOS, or Linux).
  2. Add Flutter to your system path to use flutter commands in the terminal.

Step 2: Verify the Installation​

Open a terminal and run:

flutter doctor

This command checks if your environment is correctly set up and lists any missing dependencies.

Step 3: Install Flutter and Dart Plugins​

Install the Flutter and Dart plugins in your editor (e.g., Visual Studio Code or Android Studio) for Flutter development.

2. Creating a New Flutter Project​

  1. Open a terminal and run:

    flutter create my_flutter_app

  2. Navigate to the project directory:

    cd my_flutter_app

  3. Open the project in your preferred code editor.

3. Understanding Flutter Project Structure​

  • lib/: Contains the Dart code for your application. The main entry file is main.dart.
  • pubspec.yaml: Configuration file where dependencies are added.
  • android/ and ios/: Platform-specific folders for Android and iOS settings.

4. Writing a Simple Flutter App​

In the lib/main.dart file, replace the default code with the following:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

This code sets up a simple counter app. Each time you press the floating action button, the counter increments by one.

5. Running the App​

Step 1: Connect a Device or Start an Emulator​

  1. Connect an Android or iOS device or start an emulator/simulator.

  2. Check connected devices with:

    flutter devices

Step 2: Run the App​

In the terminal, run:

flutter run

The app should now open on the connected device or emulator, displaying a screen with a counter and a button.

6. Understanding Flutter Widgets​

Flutter applications are built with widgets. Here are the key widgets used in the example app:

  • MaterialApp: Sets up app-level configuration like theme and title.
  • Scaffold: Creates a basic structure with an app bar, body, and floating action button.
  • AppBar: Displays a title bar at the top of the app.
  • Text: Displays text in the app.
  • FloatingActionButton: A button for user interaction, with an icon inside.
  • setState: Updates the state of a widget and rebuilds the UI.

Adding More Widgets​

You can add more widgets inside the Column widget in MyHomePage to experiment with Flutter's UI flexibility.

7. Adding External Packages​

To use third-party packages, update pubspec.yaml:

  1. Open pubspec.yaml and add a package, like provider:

    dependencies:
      provider: ^5.0.0

  2. Run:

    flutter pub get

  3. Use the package in your Dart code.

Summary​

This tutorial covered the basics of setting up and using Flutter and Dart to create a simple cross-platform app:

  1. Setting up the Flutter environment.
  2. Creating and running a Flutter project.
  3. Understanding Flutter’s widget-based architecture.
  4. Adding and using third-party packages.

Flutter provides a robust environment for building interactive mobile applications with a single codebase. Experiment with additional widgets and layouts to expand your Flutter knowledge.

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.