View video tutorial

FLUTTER and Dart

FLUTTER

This tutorial will describe the basics of dart programming.

Dart practice in VS Code.


flutter download

Dart programming in VS Code


Dart practice in Android Studio.


Dart in Android Studio

Dart programming in Android Studio


Dart in Android Studio

Dart programming in Android Studio


Dart in Android Studio

Dart programming in Android Studio


Dart in Android Studio

Dart programming in Android Studio


Dart in Android Studio

Dart programming in Android Studio


Practice with flutter examples.

To see the output for every example copy the code and try it in your project.(file: lib\main.dart)

Example

Text widget

import 'package:flutter/material.dart';

main() {
  runApp(Text(
    "Hello data",
    textDirection: TextDirection.ltr,
  ));
}

Example

Text widget as a child of Center widget.

import 'package:flutter/material.dart';
void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
        style:TextStyle(color:Colors.white),
      ),
    ),
  );
}

Example

Text widget as a child of Center widget.

import 'package:flutter/material.dart';

main() {
  runApp(
    Center(
      child: Text(
        "Hello data center",
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Example

runApp() uses MaterialApp().

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    title: "My Flutter App",
    home: Material(
      color: Colors.lightBlueAccent,
      child: Center(
        child: Text(
          "Hello data center",
          textDirection: TextDirection.ltr,
        ),
      ),
    ),
  ));
}

Example

runApp() uses MaterialApp().

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      title: "My Flutter App",
      home: Scaffold(
        appBar: AppBar(title: Text("My First App")),
        body: Material(
          color: Colors.lightBlueAccent,
          child: Center(
            child: Text(
              "Hello data Scafold",
              textDirection: TextDirection.ltr,
              style: TextStyle(color: Colors.white, fontSize: 30),
            ),
          ),
        ),
      ),
    ),
  );
}

Example

MaterialApp() uses Scaffold().

import 'package:flutter/material.dart';

main() {
  runApp(new MaterialApp(
    title: "App Title",
    home: new Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('My First Flutter'),
      ),
    ),
  ));
}

vscode and flutter

Output should look like this.


Example
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "App Title",
      home: new Scaffold(
        appBar: AppBar(
          title: Text('Home'),
        ),
        body: Center(
          child: Text('My First Flutter'),
        ),
      ),
    );
  }
}

vscode and flutter

Output should look like this.


Example
import 'package:flutter/material.dart';

main() {
  runApp(new MaterialApp(
    title: "App Title",
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('My First Flutter'),
      ),
    );
  }
}

vscode and flutter

Output should look like this.

Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.

Try Dart and Flutter Here.