Блог

Как я могу применить градиент, подобный приведенному здесь, к фону приложения? Вы видите, как градиент перемещается вниз по панели приложения и телу каркаса, как будто они были одним виджетом, а не 2 виджетами, каждый из которых имеет свой собственный цвет?

Вам нужно использовать контейнер в качестве фона для вашего каркаса, чтобы добавить градиент. Вы также можете использовать виджет непрозрачности, чтобы сделать контейнер или любой виджет прозрачным. Но вот точное решение, которое вы ищете:

 Scaffold(
  body: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [Color(0xFF282a57), Colors.black],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 50, 20, 0),
          child: Container(
            child: Row(
              children: <Widget>[
                Icon(Icons.menu,color: Colors.white,),
                Spacer(),
                Text("Expense",style: TextStyle(color: Colors.white,fontSize: 18,)),
                Spacer(),
                Icon(Icons.clear, color: Colors.white,)
              ],
            ),
          ),
        ),
      ],
    ),
  )