Flutter: Stateless Widgets

To create a template which include Scaffold and an AppBar on the Scaffold: Use appBar function

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,
    
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(appBar: AppBar(),),
    );
  }
} //AppBar is the Bar that appears upper side of the app 
//AppBar usually consists of 3 main parts:Leading, Title, Actions

To create a Text on the AppBar: Use “title” Widget in the AppBar funtion

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
          appBar: AppBar(
        title: Text('Homepage'),
      )),
    );
  }
} // Now, there is a Title on the AppBar

By using “Ctrl + S” shorcut, you may hot reload the app to the Emulator.

To add a text in the main field and bringing it to the center: Use “body” function in the Scaffold function and use Center(child: Text(“Here your text goes”)) statement

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Homepage'),
        ),
        body: Center(
          child: Text(
            'This is the Homepage',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
    );
  }
}

This code may be stated in this way, as well: By creating a Stateless Widget as a class

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Homepage'),
        ),
        body: Center(child: Text1()),
      ),
    );
  }
}
class Text1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'This is the Homepage',
      style: TextStyle(fontSize: 30.0),
    );
  }
}