Question 128295 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – 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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    AppBar(
  flexibleSpace: Image.asset(
    'assets/images/foodBackground.png',
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search