TEXT: FLUTTER - THE SCAFFOLD AND THE APPBAR

 Code from the video:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World'),
        centerTitle: true,
        titleTextStyle: const TextStyle(
          color: Colors.red,
          fontSize: 30.0,
        ),
        leading: const Icon(
          Icons.heart_broken,
          color: Colors.red,
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.home),
            onPressed: () {
              print('You clicked the home button');
            },
          ),
          IconButton(
            icon: const Icon(Icons.camera),
            onPressed: () {
              print('You clicked the camera button');
            },
          ),
        ],
        shadowColor: Colors.amber,
        backgroundColor: Colors.blue, //bgcolor of the AppBar Widget
        elevation: 0,
      ),
      //this is to change the background color of the body
      backgroundColor: Colors.green,
      body: const Column(
        children: [
          Text('This is the first line'),
          Text('This is the second line'),
          Text('This is the third line'),
        ],
      ),
    );
  }
}


No comments:

Post a Comment

Flutter and WebAssembly: A Powerful Combination for Web Development

 Introduction to Flutter and WebAssembly   Flutter, a popular open-source UI software development toolkit created by Google, has revolution...