Упаковка Scaffold с контейнером для градиентного фона, как установить градиент для фона контейнера во флаттере?
Я хотел бы обернуть ScaffoldContainer, чтобы получить градиентный фон, который также находится под AppBar. В основном полноэкранный фон gradient. Однако моя попытка ничего не дает.
Есть ли другой способ сделать это, когда я могу сохранить функциональность AppBar, но разместить ее поверх gradient, охватывающего весь экран?
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),
),
],
),
),
),
);
}
}
Благодарность! все еще в начальной фазе с трепетанием ..
конечно, пожалуйста ...
Ответы 6
В вашем коде - В разделе Scaffold добавьте - backgroundColor: Colors.transparent,
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
..
Я пропустил Scaffold backgroundColor, спасибо большое!
@dan Это правильный ответ. Не могли бы вы отметить это как правильное. Спасибо!
Вы также можете добавить градиент к AppBar следующим образом:
new Scaffold(
appBar: AppBar(
title: Center(child: Text('Awesome AppBar')),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: 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),
),
),
child: ...,
),
body: ...,
);
Параметры LinearGradient:
colors: массив цветов, которые будут использоваться в градиенте, в данном случае два оттенка синего.begin,end: положение первого цвета и последнего цвета, в данном случае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, в этом нет необходимости.Вы также можете добавить ребенка к
Container. например: какое-то изображение логотипаchild: Align( alignment: Alignment.center, child: Image.asset( "images/logo.png", width: 128, height: 128, )), ),
Надеюсь это поможет.
Просто добавьте 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
],
),
),
),
),
Шайки Абрамчик ,. Почему вы голосуете против, что не так в этом ответе
потому что ваш ответ точно такой же, как и выше
В приведенном выше ответе что-то другое, я просто определяю, как использовать ..
Вы просто используете FlexibleSpace на панели приложений
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Colors.red,
Colors.blue
])
),
),
),
Точная копия этот ответ
Я использовал этот фрагмент кода, чтобы установить цвет background как gradient
return MaterialApp(
home: Scaffold(
body: Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(255, 25,178,238),
Color.fromARGB(255, 21,236,229)
],
)),
child: Align(
alignment: Alignment.center,
child: Image.asset(
"images/app_logo.png",
width: 128,
height: 128,
)),
),
),
);
Вы можете использовать непосредственно под кодом для цвета градиента любого контейнера или представления.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
),
body: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.red, Colors.blue, Colors.black])
)
),
);
}
}
добавить
scaffoldBackgroundColor: Colors.transparentвнутрьThemeData( ...