Блог

В настоящее время я занимаюсь веб-проектом Flutter, в котором я пытаюсь скопировать пользовательский интерфейс рабочего стола Ubuntu. В настоящее время это изображение используется в качестве ссылки.

Для фонового изображения я использовал container виджет с AssetImage виджетом, как показано на кодовом блоке ниже.

 class UbuntuBackground extends StatelessWidget {
  const UbuntuBackground({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/ubuntu.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
 

Я сделал игрушечный Sidebar виджет с column виджетом, содержащим 2 container виджета.

 class AppSidebar extends StatelessWidget {
  const AppSidebar({Key? key}) : super(key: key);

  static Color sidebarColor = Color(0xff0D486E);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: sidebarColor,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
        ],
      ),
    );
  }
}
 

Затем я подумал об использовании Stack виджета, чтобы AppSidebar показать его перед UbuntuBackground виджетом.

 class UbuntuHomepage extends StatefulWidget {
  UbuntuHomepage({Key? key}) : super(key: key);

  @override
  _UbuntuHomepageState createState() => _UbuntuHomepageState();
}

class _UbuntuHomepageState extends State<UbuntuHomepage> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AppSidebar(),
        UbuntuBackground(),
      ]
    );
  }
}
 

Это UbuntuHomepage также маршрут приложения по умолчанию, как указано в моем main.dart файле.

 void main() {
  runApp(MyApp());
}

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

Однако при создании приложения будет отображаться только UbuntuBackground виджет, как показано на скриншоте ниже.

С учетом этого, как я могу наложить AppSidebar виджет поверх UbuntuBackground виджета?

Кнопка AppSidebar() находится в фоновом режиме, вместо этого попробуйте сделать вот так,

 return Stack(alignment: Alignment.centerLeft, children: <Widget>[
      UbuntuBackground(),
      AppSidebar(),
    ]);
 

В стеке последний виджет будет верхним виджетом.