How to fix text scroll over image in flutter

Question

I am trying to build some simple layout with image on top and text below it.

When ever I scroll the text, the text scrolls up and covers the image.

  Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
      title: Text('Tax'),
    ),
    body: Container(
      constraints: BoxConstraints.expand(),
      color: Color(0xFFE0E0E0),
      child: Stack(
        children: <Widget>[
          _getBackGround(),
          _imglo(),
          _getContent(),
        ],
      ),
Widget _getContent(){
  return ListView(
    padding: EdgeInsets.fromLTRB(0.0, 272.0, 0.0, 32.0),
    children: <Widget>[
      Container(

        padding: EdgeInsets.symmetric(horizontal: 32.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Text("ssssssss", style: headerTextStyle),
            Separator(),
            Text("ssss", style: 
regulatTextStyle,textDirection: TextDirection.rtl,),
Text("sss", style: regulatTextStyle,textDirection: 
TextDirection.rtl,)
        ),
      )
    ],
  );
}

What can I do to make the text not overlap the image?

Answer 1

Your text scrolls over the image because you're using a Stack , which is used for overlaying elements on top of each other. For what you want to achieve, it looks like you don't need a Stack at all, you need a decorated Container and a Column .

Assuming your background is an image (hence the use of a Stack in your question), your build method could look something like this:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container( // An empty widget we can decorate.
        decoration: new BoxDecoration( // We want to decorate it with an...
          image: new DecorationImage( // ...image!
            image: new NetworkImage("https://via.placeholder.com/800"),
            fit: BoxFit.cover, // Make the image cover all space in the container.
          ),
        ),
        child: Column( // Arranges children vertically on the screen, no scrolling.
          children: <Widget>[
            Image.network("https://via.placeholder.com/300"), // `_imglo` goes here.
            Expanded( // Make the ListView fill up all remaining column space.
              child: ListView.builder(
                // Example ListView. Your `_getContent()` goes here.
                itemCount: 10,
                itemBuilder: (_, index) => ListTile(
                      title: const Text("Example"),
                      subtitle: Text(
                        index.toString(),
                      ),
                    ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Alternatively, if color is all you want for your background, the Scaffold widget has a backgroundColor property:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blue,
      body: ...
    );
  }

Answer 2

class SomeClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tax'),
      ),
      body: Container(
        constraints: BoxConstraints.expand(),
        color: Color(0xFFE0E0E0),
        child: Column(
          children: <Widget>[
           Stack(
              children: <Widget>[_getBackGround(), imglo()],
            ),
            Container(
              child: _getContent(),
           )
         ],
       ),
     ),
   );
 }
 }