How to Create Flutter Transparent App Bar



In this tutorial, I am talking about the flutter appbar. how you can easily create your own flutter transparent AppBar for your flutter application.

At first, create a appbar:

appBar: AppBar(
          title: Text("Transparent AppBar"),
          leading: Icon(Icons.menu),
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.transparent,
        ),

Then must use extendBodyBehindAppBar true then it woking properly.

 extendBodyBehindAppBar: true,

Flutter Transparent AppBar

Flutter transparent AppBar

Full tutorial source code:

import 'package:flutter/material.dart';
import 'package:testappfortutorial/pages/page1.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          title: Text("Transparent AppBar"),
          leading: Icon(Icons.menu),
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.transparent,
        ),
        body: Image.network(
          "https://cdn.pixabay.com/photo/2020/12/21/19/05/window-5850628_960_720.png",
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
  • How to Get SHA1 key in Flutter|SHA-256 Flutter Firebase
    How to Get SHA1 key in Flutter for firebase | SHA-1 or SHA-256 key generate Flutter firebase tutorials. SHA-1 Fingerprint Certificate
  • Animated Default Text Style Flutter – Widget Tutorial
    Animated Default text style for flutter. Flutter Text Animation:- AnimatedDefalutTextStyle() Code Example: Text Animation: Flutter Animation Code Example: READ ALSO …  Learn How to Use Flutter Align Widget with Example Code
  • How to Create Scrollable Flutter Table | DataTable
    You Can Create easily Flutter Table with this DataTable() Widget. Then You need columns and rows for the table. columns called DataColumn() and rows called DataRow(). DataColumn() insert label set Value and DataRow() insert DataCell() set Value. DataTable() Code Example: How To Create Flutter DataTable: READ ALSO …  Animated CurvedNavigationBar Flutter Tutorial
  • How to set Flutter Orientation Portrait Or Landscape Only
    If you want to set Fixed Flutter Orientation for your application You need import first service. Code Example: Some Value For Device Orientation : Orientation Project Code Example: Flutter Orientation Portrait Or Landscape Only READ ALSO …  Learn How to Use Flutter Align Widget with Example Code
  • Animated CurvedNavigationBar Flutter Tutorial
    Flutter CurvedNavigationBar In This Tutorial, you can learn how to design CurvedNavigationBar to use in your flutter project. With the carved navigation Bar Flutter package using you can modify your navigation Bar. Import CarvedNavigationBar: Widget CarvedNavigationBar: CurvedNavigationBar Flutter Tutorial: Now Sharing this tutorial full project code CurvedNavigationBar. You can use this coding for practice. When …

    Read more …

Leave a Comment