Блог

Главная - Вопросы по программированию - Добавление фона в панель управления flutter

Добавление фона в панель управления flutter

#flutter #flutter-layout

#flutter #flutter-макет

Вопрос:

Пожалуйста, любой эксперт, который может подсказать мне, как создать фоновое изображение на этой панели, я буду очень благодарен. Когда я добавляю boxfit в следующий виджет scaffold, код получает красные строки.

Пожалуйста, любой эксперт, который может подсказать мне, как создать фоновое изображение на этой панели, я буду очень благодарен. Когда я добавляю boxfit в следующий виджет scaffold, код получает красные строки.

 import 'package:google_fonts/google_fonts.dart';
import 'package:maps_app/screens/Dash_board.dart';

class Dashboard extends StatefulWidget {
  static const routeName = '/home1';
  @override
  DashboardState createState() => new DashboardState();
}

class DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 110,
          ),
          Padding(
            padding: EdgeInsets.only(left: 16, right: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "ColorLine",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Colors.black87,
                              fontSize: 24,
                              fontWeight: FontWeight.bold)),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Text(
                      " Home",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Color(0xff000000),
                              fontSize: 14,
                              fontWeight: FontWeight.w600)),
                    ),
                  ],
                ),
                IconButton(
                  iconSize: 70,
                  alignment: Alignment.center,
                  icon: Image.asset(
                    "assets/colorline.png",
                    width: 100,
                    height: 100,
                  ),
                  onPressed: () {},
                )
              ],
            ),
          ),
          SizedBox(
            height: 40,
          ),
          GridDashboard()
        ],
      ),
    );
  }
}

Ответ №1:

 Scaffold(
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background.jpeg"),
        fit: BoxFit.cover,
      ),
    ),
    child: ...
  ),
);

введите описание изображения здесь

Комментарии:

1. Когда я добавляю приведенный выше код для фона панели инструментов, дочерний код просто становится красными линиями.

2. @waseemafzal Я проверяю это решение на своем компьютере. И приложите скриншот. Можете ли вы прикрепить экран своего эмулятора и полный код виджета.

3. Пожалуйста, ознакомьтесь с изображением ошибки по следующей ссылке, ibb.co/z67QCmb

4. @waseemafzal Вы пытаетесь установить в дочернем параметре список виджетов, но контейнерный виджет в дочернем параметре может принимать только один виджет. Контейнер (дочерний элемент: столбец (дочерние элементы: [ … список виджетов тура]))

5. Контейнер ( оформление: BoxDecoration( изображение: DecorationImage( изображение: AssetImage(«assets/background.jpeg «), fit: BoxFit.cover, ), ), дочерний элемент: Столбец (дочерние элементы:[SizeBox(),Контейнер()]) ),

Ответ №2:

Что вы хотите сделать, так это обернуть свой каркас виджетом контейнера. Кроме того, вам нужно сделать цвет каркаса прозрачным. Я буду использовать немного ответа Влада Коношенко, чтобы помочь вам в этом.

 return Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background.jpeg"),
        fit: BoxFit.cover,
      ),
    ),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      // Rest of the code remains same.
      ...
    ),
);