'How to set Flutter AppBar Transparent without the Status bar

I tried to set a transparent appbar using.

return Scaffold(
  extendBodyBehindAppBar: true,
      appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
  ),
)

When I added safearea widget status bar goes to dark. Time and other indicators are not shown.

How to set only AppBar transparent using Flutter without Statusbar?

Solution 1:^[1]

You can try using the Stack widget for your purpose:

           Scaffold(
            body: Stack(
              children: <Widget>[
                Scaffold(
                  backgroundColor: Colors.transparent,
                  extendBodyBehindAppBar: true,
                  appBar: AppBar(
                    centerTitle: true,
                    title: Text(
                      "Transparent AppBar",
                      style: TextStyle(color: Colors.red),
                    ),
                    backgroundColor: Colors.transparent,
                    elevation: 0.0,
                  ),
                  body: SingleChildScrollView(
                    child: Column(
                      children: [
                        new Placeholder(
                          fallbackHeight: 500,
                          color: Colors.red,
                        ),
                        new Placeholder(
                          fallbackHeight: 500,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )

Solution 2:^[2]

This is how i make AppBar transparent + make image extend till the top of the page with (back arrow) or (Drawer) or appbar title

This is Simple Code:

 Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),

This is Full Code:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:inshaa/data_layer/Models/Service_model.dart';
import 'package:provider/provider.dart';

class CompanyServiceDetails extends StatelessWidget {
   CompanyServiceDetails({Key? key}) : super(key: key);
  //Servicee? service;

  @override
  Widget build(BuildContext context) {
     Servicee? service =
         ModalRoute.of(context)?.settings.arguments as Servicee?;

    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(22),
                  bottomRight: Radius.circular(22)),
              child: Container(
                decoration: BoxDecoration(
                  boxShadow:[
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      blurRadius: 0,
                      spreadRadius: 0,
                      offset: const Offset(0, 0),
                    ),
                  ]
                ),
                  height: MediaQuery.of(context).size.height * 0.5,
                  width: double.infinity,
                  child: Image.network(
                    'https://images.pexels.com/photos/4513940/pexels-photo-4513940.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                    fit: BoxFit.cover,
                  )),
            ),
            const SizedBox(
              height: 10,
            ),
             Align(
                alignment: Alignment.center,
                child: Text(
                  service!.service_title.toString(),
                  style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 34),
                )),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0,vertical: 20),
              child: Column(
                children: [
                  const Text(
                    'Description',
                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18),
                  ),
                  Text(
                    service.service_des.toString(),
                  ),
                ],
              ),
            ),
             Divider(),
            Wrap(
              children: [
                MyCard(
                    text1:'Area',
                text2: service.service_area.toString()),

                MyCard(
                    text1: 'our offer',
                text2: service.service_price.toString()),
                MyCard(
                    text1:'Deadline',
                    text2: service.deadline.toString()),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class MyCard extends StatelessWidget {
   MyCard({Key? key,required this.text1,required this.text2}) : super(key: key);
String text1;
String text2;
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      margin: const EdgeInsets.all(5),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
      child: Container(
        padding: EdgeInsets.all(7),
           height: 90,
           width: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(text1,textAlign: TextAlign.center,style: TextStyle(fontSize: 14,fontWeight: FontWeight.w600),),
              Text(text2,textAlign: TextAlign.center,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400),),
            ],
          )),
    );
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	esentis
Solution 2	Ramy Wahid

'How to set Flutter AppBar Transparent without the Status bar

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]