CODEWITHSUNDEEP
flutterflutter-layoutappbar
Eevee
Eevee

Reputation: 11

Add padding to text in appbar

How to add padding to text in SliverAppBar?

effect picture

this code is not working:

SliverAppBar(
 title: Padding(
  padding: EdgeInsets.only(top: 100),
  child: Text('text'),
  )
)

Upvotes: 0

Views: 3463

Answers (4)

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

You can do like this:

SliverAppBar(
           
              expandedHeight: 300, //add expand height 
              floating: false,
              pinned: true,
              bottom: PreferredSize(                       // Add this code
                preferredSize: Size.fromHeight(60.0),      // Add this code
                child: Text(''),                           // Add this code
              ),                                           // Add this code
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )

Upvotes: 0

Musfiq Shanta
Musfiq Shanta

Reputation: 1625

For only Appbar

AppBar{

    toolbarHeight: 180,

}

Upvotes: 0

Mobina
Mobina

Reputation: 7119

If you set the padding more than the height of the SilverAppBar, the text won't be visible. A workaround is to add the title to the bottom of the SilverAppBar:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                bottom: PreferredSize(
                  preferredSize: Size.fromHeight(60.0),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'Tabs demo',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 30),
                        )),
                  ),
                ),
              )
            ];
          },
          body: ...
      )
    );
  }

Result:

res

Upvotes: 2

NiklasLehnfeld
NiklasLehnfeld

Reputation: 1081

Use the SliverAppBar like this with padding works like a charm:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'NiklasLehnfeld',
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Padding(
                padding: const EdgeInsets.only(top: 30.0),
                child: Text("Niklas Lehnfeld"),
              ),
              leading: Icon(Icons.menu),
            )
          ],
        ),
      )));
}

If it still doesn't work please provide more code how do you integrate the 'SliverAppBar` on your side.

Upvotes: 0

Related Questions