Флаттер: упаковка лесов с контейнером для градиентного фона

Question

Я бы хотел обернуть эшафот контейнером, чтобы получить градиентный фон, который также находится под панелью приложений.В основном полноэкранный градиентный фон.Однако моя попытка ничего не делает.Есть ли другой способ сделать это, где я могу сохранить функциональность AppBar, но иметь его поверх градиента, который охватывает весь экран?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(title: 'Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          stops: [0.1, 0.5, 0.7, 0.9],
          colors: [
            Colors.yellow[800],
            Colors.yellow[700],
            Colors.yellow[600],
            Colors.yellow[400],
          ],
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Icon(Icons.menu),
          backgroundColor: Color(0x00000000),
          elevation: 0.0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'dummy text',
              ),
              Text(
                '5',
                style: Theme.of(context).textTheme.display1,
              ),
              FloatingActionButton(
                backgroundColor: Colors.white,
                foregroundColor: Colors.black45,
                elevation: 0.0,
                onPressed: () {},
                tooltip: 'Play',
                child: Icon(Icons.play_arrow),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Вы также можете добавить градиент к AppBar, например,

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: new BoxDecoration(
            gradient: new LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
      ),
      body: ...,
    );

Параметры LinearGradient:

• colors: массив цветов, которые будут использоваться в градиенте, в данном случае два оттенка синего.
• begin, end: позиция первого цвета и последнегоcolor, в этом случае
• FractionalOffset позволяет нам рассматривать координаты как диапазон от 0 до 1 как для x, так и для y.Поскольку нам нужен горизонтальный градиент, мы используем один и тот же Y для обеих мер, а x изменяется с 0,0 (слева) до 1,0 (справа).
• stops: этот массив должен иметь тот же размер, что и цвета.Он определяет, как будут распределяться цвета.[0.0, 1.0] заполнит его слева направо.[0.0, 0.5] будет заполнять цвета слева до половины полосы и т. Д.
• tileMode: что делать, если остановки не заполняют всю область.В этом случае мы добавили зажим (он будет повторно использовать последний использованный цвет), но поскольку наш градиент изменяется от 0,0 до 1,0, в этом нет особой необходимости.

Надеюсь, это поможет.

Answer 2

Просто добавьте FlexibleSpace в AppBar и украсьте контейнер.Тогда панель приложения представляет собой градиент на заднем плане.

appBar: AppBar(

      title: Text('Flutter Demo'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ],
          ),
        ),
      ),
    ),

Answer 3

в вашем коде - под Scaffold добавить - backgroundColor: Colors.transparent,

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..