CODEWITHSUNDEEP
flutter
gsk
gsk

Reputation: 107

Flutter: SilverAppBar Background Image with Text

I am trying to make an app bar looks like this:

enter image description here

I hope to collapse the big image using SilverAppBar, but I am having hard time to insert AssetImage (or Image.asset'). I almost exactly followed the code from the [official Flutter website][2], and unfortunately, both AssetImageandImage.asset` cannot be used as shown below:

enter image description here

Is there any way to do this?

Upvotes: 0

Views: 319

Answers (3)

sachintha dilshan
sachintha dilshan

Reputation: 121

Please add background_app_bar: ^1.0.0 dependency.

import 'package:background_app_bar/background_app_bar.dart';
...

SliverAppBar(
      backgroundColor: Colors.white,
      pinned: true,
      snap: true, 
      floating: true,
      expandedHeight: 160.0,
      flexibleSpace: new BackgroundFlexibleSpaceBar(    // Add this
          title: new Text('title'),
          centerTitle: false,
          titlePadding: const EdgeInsets.only(left: 5.0, bottom: 5.0),
          background: Image.asset('url'),
    ),
   ),

Upvotes: 0

xion
xion

Reputation: 1369

maybe you can use background like this:

SliverAppBar(
...
...
   background: Image(
      image: NetworkImage(recipeDetails.coverPhoto),
      fit: BoxFit.cover,
      ),
   ),

Upvotes: 1

Titas Černiauskas
Titas Černiauskas

Reputation: 67

Wrap Image.asset with Container widget

          Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Container(
                      child: Image.asset('name'),
                    )
                    ],
                ),

Upvotes: 1

Related Questions