Transparent Appbar With Full Screen Image In Flutter

admin_img Posted By Bajarangi soft , Posted On 21-09-2020

Without using an AppBar and use SafeArea to keep our UI elements inside the ‘safe’ area on our page. The downside of this method is that we cannot use actions in our AppBar and also back button and navigation are not done automatically for us (in both cases we would need to create custom ones). This method is simple and works well for example for a landing page, but not so much for a detail page where actions and navigation are very common.

Transparent Appbar With Full Screen Image In Flutter

Complete Code For Trasparent Appbar With Full Screen Image Background In Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Page()
        )
    );
  }
}

class Page extends StatefulWidget {

  PageState createState() => PageState();

}

class PageState extends State<Page>{

  final controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/2.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Text(
                'BajarangiSoft.com',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                ),
              ),
            ),
          ),
          Positioned(
            child: AppBar(
              leading: Icon(Icons.chevron_left),
              title: Text("Transparent AppBar"),
              backgroundColor: Colors.transparent,
              elevation: 0,
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.notifications_none),
                  onPressed: () {},
                  tooltip: 'notification',
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Related Post