Question

我正在尝试使用DecoratedBox加载背景图像并在其中显示一个小的居中图标（我是Flutter的新手）-如何强制背景缩放到屏幕宽度？

这是我到目前为止所拥有的：

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: DecoratedBox(
          position: DecorationPosition.background,
          decoration: BoxDecoration(
            color: Colors.black,
            image: DecorationImage(
                image: AssetImage('images/background.jpg'),
                fit: BoxFit.fill),
          ),
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => MenuScreen(),
                ),
              );
            },
            child: Image(
              height: 100.0,
              width: 100.0,
              image: AssetImage('images/centre.png'),
            ),
          ),
        ),
      ),
    );
  }
}

我了解容器可以根据内容缩放-我需要将图标放在另一个全角元素中吗？

欢呼

Answer 1

签出-

import 'package:flutter/material.dart';

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

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



class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

double height=MediaQuery.of(context).size.height;
double width=MediaQuery.of(context).size.width;

    return Scaffold(
      appBar:AppBar(),
      backgroundColor: Colors.white,
      body: Center(
        child: Container(
          height:height,
          width:width,
          decoration: BoxDecoration(
            color: Colors.black,
            image: DecorationImage(
                image: NetworkImage('https://picsum.photos/${width.round()}'),
                fit: BoxFit.fill),
          ),
          child: GestureDetector(
            onTap: () {

            },
            child: Image(
              height: 100.0,
              width: 100.0,
              image: NetworkImage('https://picsum.photos/100'),
            ),
          ),
        ),
      ),
    );
  }
}

如何使Flutter DecoratedBox背景图像填充视口

1 个答案: