TEXT: FLUTTER - THE BOTTOM NAVIGATION BAR AND THE FLOATING ACTION BUTTON

 Code:

 

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.white,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.black12,
        elevation: 10.0,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.camera), label: "Images"),
          BottomNavigationBarItem(icon: Icon(Icons.shop_2), label: "Shop"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("You clicked the floating action button");
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      ),
      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...