Flutter add ScrollView and Background image

问题

Hello i am trying to put a ScollView to my app but the problem is that i can't have both ScrollView and Background image so if someone can help me with that (here i put the background image so how can i put the scrollview now ?) I had the 2 working but not both in the same time, the scrollview i used was the singleChildScrollView

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:audioplayers/audio_cache.dart';

void main() {
  runApp(new MaterialApp(
  home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
   @override
   _State createState() => _State();

}

AudioCache cache = new AudioCache(fixedPlayer: new AudioPlayer());

void PlayBest() {

  cache.play('best.mp3');

}

void StopBest() {

 cache.play('pro.mp3');

}
MediaQueryData queryData;



double lecran = queryData.size.width;
double loecran = queryData.size.height;
double ratio = queryData.textScaleFactor;



class MyImagePro extends StatelessWidget {
@override
Widget build(BuildContext context) {
var assetsImage = new AssetImage('assets/iconhd.png');
var image = new Image(image: assetsImage, width: MediaQuery.of(context).size.height/4.5, height: MediaQuery.of(context).size.height/4.5,);
  return new Container(child: image,);
}}

class MyImagePro2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
var assetsImage = new AssetImage('assets/trumpfond.png');
var image = new Image(image: assetsImage, width: MediaQuery.of(context).size.height, height: MediaQuery.of(context).size.longestSide,);
  return new Container(child: image,);
}}


class _State extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(

        body: new Container(
          decoration: new BoxDecoration(image: new DecorationImage(image: new AssetImage("assets/trumpfond.png"), fit: BoxFit.cover)),
            child: new Column( 
            children: <Widget>[
                new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(top: 50.0)),

                ],
              ),
              new Row(
                children: <Widget>[
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 1"),
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                  new Text("Song 2"),
                ],
              ),
              new Row(
                children: <Widget>[
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 3"),
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                  new Text("Song 4"),
                ],
              ),
              new Row(
                children: <Widget>[
              new Padding( padding: EdgeInsets.fromLTRB(0.0, 100.0, 0.0, 0.0)),
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Padding( padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.fromLTRB(60.0, 10.0, 20.0, 0.0)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 1"),
                  new Padding( padding: EdgeInsets.fromLTRB(140.0, 10.0, 20.0, 0.0)),
                  new Text("Song 2"),
                ],
              ),
            ],
          ),
            ),);
  }

}

回答1:

you can achieve using Stack and SingleChildScrollView.

i hope that following may help you.

@override
  Widget build(BuildContext context) {
    return new Scaffold(

      body: Stack(
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(image: new DecorationImage(image: new AssetImage("images/p2.jpg"), fit: BoxFit.fill)),
          ),
          SingleChildScrollView(
            child: new Container(
              color: Colors.transparent,
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Padding( padding: EdgeInsets.only(top: 50.0)),

                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
                      new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                      new Text("Song 1"),
                      new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                      new Text("Song 2"),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
                      new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

来源：https://stackoverflow.com/questions/52680181/flutter-add-scrollview-and-background-image