Flutter: как изменить стиль заголовка FlexibleSpaceBar? - PullRequest
Новая
       1

Flutter: как изменить стиль заголовка FlexibleSpaceBar?

1 Ответ

0 голосов
/ 28 мая 2020

Просто оберните свой текст в контейнер, который действует как фон, и придайте ему размеры и цвет. 

Container(
  padding: const EdgeInsets.all(8.0),
  color: Colors.yellow,
  child: Text("New Years),
)

Редактировать: Как вы упомянули, вам нужен этот стиль текста в FlexibleSpaceBar.

Предполагая, что вы хотите украсить текст заголовка в FlexibleSpaceBar, обратите внимание, что нет необходимости передавать виджет Text в поле заголовка, вы можете передать ему любой виджет .

Передайте Container, дочерним элементом которого является виджет Text, и стилизуйте контейнер. См. Код ниже: 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            stretch: true,
            onStretchTrigger: () {
              // Function callback for stretch
              return;
            },
            expandedHeight: 300.0,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle,
              ],
              centerTitle: true,
              title: Container(  //HERE...
                color: Colors.yellow,
                padding: const EdgeInsets.all(8),
                child: Text(
                  'NEW YEARS',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                    fit: BoxFit.cover,
                  ),
                  const DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment(0.0, 0.5),
                        end: Alignment(0.0, 0.0),
                        colors: <Color>[
                          Color(0x60000000),
                          Color(0x00000000),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              ListTile(
                leading: Icon(Icons.wb_sunny),
                title: Text('Sunday'),
                subtitle: Text('sunny, h: 80, l: 65'),
              ),
              ListTile(
                leading: Icon(Icons.wb_sunny),
                title: Text('Monday'),
                subtitle: Text('sunny, h: 80, l: 65'),
              ),
              // ListTiles++
            ]),
          ),
        ],
      ),
    );
  }
}
...