Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter Image AppBar Extend further than background

My question is how do I extend my transparent image further than the appbar’s borders? I want the image to cover the whole of the appbar, I have tried using fit: and it doesn’t do the job. I want the whole of the orange covered by the image.

This is my code below:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: SizedBox(
        width: 1000,
        child: Image.asset('assets/images/foodBackground.png'),


         ),
            backgroundColor: const Color(0xffFA7343),
        ),
        body: Text('test1'),
      ),
    );
  }
}

This is the image of how it looks, as you can see it hasn’t filled to the edges of the appbar.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

try with this and you need to ensure titleSpacing should be zero and you dynamic width ouble.infinity

AppBar(
          titleSpacing: 0,
          title: SizedBox(
            width: double.infinity,
            child: Image.asset('assets/images/test.jpg'),
          ),
          backgroundColor: const Color(0xffFA7343),
        )

output:

enter image description here

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading