CODEWITHSUNDEEP
imageflutter
Mussa Kalokola
Mussa Kalokola

Reputation: 135

How to resize image inside of a leading property?

I am trying to add a logo before the title in the App Bar but it seems the image only takes the width and height of the leading property.

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Widget build(context){
      return Scaffold(
        appBar: AppBar(
          title:Text('Hi, Andi Loshi'),
          backgroundColor: Color.fromRGBO(230, 1, 1,1),
          leading:  new Image.asset("assets/images/logo.png",
          fit:BoxFit.cover,
          height:20.00,
          width:20.00
          ),
        ),
        body: Text('Body will reside here')
      );
  }
}

Upvotes: 7

Views: 11540

Answers (5)

Taleb
Taleb

Reputation: 2249

You can wrap your leading widget inside a Center Widget or set leadingWidth property inside AppBar.

example:

appBar: AppBar(
    title: Text('Your Title'),
    //leadingWidth: 38.0,
    leading: Center(
        child: Image(
          image: AssetImage('images/test.png'),
        ),
  ),

Upvotes: 3

Damitha Neranjan
Damitha Neranjan

Reputation: 21

You can use the leadingWidth property in the AppBar.

class Home extends StatelessWidget {
Widget build(context){
  return Scaffold(
    appBar: AppBar(
      title:Text('Hi, Andi Loshi'),
      backgroundColor: Color.fromRGBO(230, 1, 1,1),
      leading:  new Image.asset("assets/images/logo.png",
      leadingWidth: 80,
      fit:BoxFit.cover,
      height:20.00,
      width:20.00
      ),
    ),
    body: Text('Body will reside here')
  );

} }

Upvotes: 0

oziem
oziem

Reputation: 470

@Mussa Kalokola you can just wrap the image in leading with padding that will make it smaller.

I think that's the easiest solution for that.

eg.

appBar: AppBar(
    title: Text(_getScreenTitle(context, _selected)),
    leading: const Padding(
      padding: EdgeInsets.all(16.0),
      child: ClipOval(
        child: Image(
          image: AssetImage('images/test.png'),
        ),
      ),
    ),
  ),

Upvotes: 5

Parth Patel
Parth Patel

Reputation: 824

Though you can not modify size of leading you can add image before title like below in appbar, title please check below code.

import 'package:flutter/material.dart';

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

class Home extends StatelessWidget {
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Container(
            child: Row(
              children: [
                Image.asset(
                  "assets/images/logo.png",
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: 10,
                ),
                Text('Hi, Andi Loshi')
              ],
            ),
          ),
          backgroundColor: Color.fromRGBO(230, 1, 1, 1),
        ),
        body: Text('Body will reside here'),
      ),
    );
  }
}

Upvotes: 5

Abdou Ouahib
Abdou Ouahib

Reputation: 886

Widgets inside an AppBar have limited size. If you want a custom one, you can implement it from scratch, this article can help you.

Upvotes: 0

Related Questions