title: Flutter - How to make a Material Button stationery while scrolling page
body: <p><a href="https://i.stack.imgur.com/atbU0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/atbU0.png" alt="enter image description here" /></a>
  ADDED PICTURE:
  Edited: June23, 2020
  for clarification... I. need these two buttons to not move at all and stay at the same position,  when I scroll these buttons are stationary but as the page scrolls  the movement of the page moves the buttons so meaning it won't be on line 1 any more if I scroll to line 4 first button is on line 4 and second button is on line 5. I don't want them to move at all... I</p>
  <p>Basically, since I need to make the image do a command I need to add a button and code in order for it to do it or its just a png image.</p>
  <p>need to add many buttons over the text within the picture ...How can I achieve this ..? I tried different tactics but as the scroll moves the buttons move too ..</p>
  <p>I am creating  an APP which has a lot of emphasis on the image in the background as such, their is text in arabic on that image per line and I want to add &quot;material buttons&quot; on top of this text. I was able to do this ... but then I used single child scroll which I only want the image to scroll but not the buttons. I want the buttons to stay in one specific position and not scroll , since the logic is on swiping right -- user will see the invisible material button become active and show English text for that specific position on swiping left user will see the arabic text that is on the image ....</p>
  <p>please help</p>
  <p>EDITED THE CODE TO ONLY SHOW THE ISSUE AND GOT RID OF COMMENTED CODE to show just one stack. -</p>
  <p>LAYOUT USED:
  Stack and laid out Image with single scroll and closed it off
  and after that added the Raised button,</p>
  <p>Layout needed:
  Just want the single child scroll to scroll the image not the raised buttons that are on top of the image. I want those buttons to be stationary ....  Maybe its a positional problem, I need to add the a different type of scroll ?</p>
  <pre><code>import 'dart:io';
  import 'package:Quran_highlighter/main.dart';
  import 'package:flutter/rendering.dart';
  import 'package:system_shortcuts/system_shortcuts.dart';
  import 'package:Quran_highlighter/Widgets/NavDrawer.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:zoom_widget/zoom_widget.dart';
  import 'package:flutter/gestures.dart';
  
  class Aliflaammeem extends StatefulWidget {
    @override
    _AliflaammeemState createState() =&gt; _AliflaammeemState();
  }
  
  class _AliflaammeemState extends State&lt;Aliflaammeem&gt; {
  
    changeTextEnglish() {
      setState(() {
        bool _visible = true;
           _visible =  _visible;
        textHolder = &quot;All Praise and Thanks is to Allah the lord of the worlds&quot;;
      });
    }
  
    changeTextArabic() {
      bool _visible = true;
      setState(() {
        _visible =  _visible;
      });
    }
  
    @override
    Widget build(BuildContext context) {
  
  
  
     SystemChrome.setPreferredOrientations(
          [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
      return Scaffold(
          body: Stack(
            children: &lt;Widget&gt;[
          Center(child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
            child: SafeArea(
                top: true,
                bottom: true,
                right: true,
                left: true,
                child: Image(
                    image: AssetImage('test/assets/quranpg0.png'),
                    fit: BoxFit.cover
                // ),
            // ),
          // ),
          // ),
                    // ),      
          // Container(
          //      child:Align(
          //        alignment: Alignment(.00,-.7
          //        ),
          //     // color: Colors.red,
          //     child: FloatingActionButton(
          //         // color: Colors.red,
          //         elevation: 9,
          //         onPressed: () =&gt; 0,
          //         child: Text(&quot;Static &quot;))
                  
          //    ),
          // ),   
                
             Container(
            child: Align(
              alignment: Alignment(.00, -.8
              ),
            child: _visible
                ? MaterialButton(
                height: 70.0,
                // minWidth: 36.5,
                // minWidth: 85.0,
                minWidth: 100.0,
                onPressed: () =&gt; changeTextArabic1(),
                onLongPress: () =&gt; changeTextEnglish1(),
                // child: Text(labels[i]),
                child: Text(surah0),
                // color: Colors.cyan[400],
                color: Colors.purple[300],
                highlightColor: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                ),
                textColor: Colors.white,
                padding: EdgeInsets.only(left: 80, top: 2, right: 78, bottom: 5),
                )
                :Container(),
                
              ),
              ),
            Container(
            child: Align(
              alignment: Alignment(.00, -.35
              ),
            child: _visible
                ? MaterialButton(
                height: 70.0,
                // minWidth: 36.5,
                // minWidth: 85.0,
                minWidth: 100.0,
                onPressed: () =&gt; changeTextArabic1(),
                onLongPress: () =&gt; changeTextEnglish1(),
                // child: Text(labels[i]),
                child: Text(label0),
                color: Colors.cyan[400],
                // color: Colors.purple[300],
                highlightColor: Colors.blue,
                // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                // ),
                textColor: Colors.white,
                padding: EdgeInsets.only(left: -4, top: 2, right: -4, bottom: 5),
                )
                :Container(),
                
              ),
              ),
          Container(
            child: Align(
              alignment: Alignment(.00, 0.1
              ),
            child: _visible
                ? MaterialButton(
                height: 70.0,
                // minWidth: 36.5,
                // minWidth: 85.0,
                minWidth: 100.0,
                onPressed: () =&gt; changeTextArabic1(),
                onLongPress: () =&gt; changeTextEnglish1(),
                // child: Text(labels[i]),
                child: Text(label1),
                color: Colors.cyan[400],
                // color: Colors.purple[300],
                highlightColor: Colors.blue,
                // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                // ),
                textColor: Colors.white,
                padding: EdgeInsets.only(left: 20, top: 2, right: 33, bottom: 5),
                )
                :Container(),
                
              ),
              ),
              // for(int i = 0; i&lt; labels.length; i++)
                 Container(
            child: Align(
              alignment: Alignment(.00, 0.54
              ),
        child: _visible
        ?
              MaterialButton(
                height: 70.0,
                minWidth: 100,
                onPressed: () =&gt; changeTextArabic1(),
                onLongPress: () =&gt; changeTextEnglish1(),
                // Positioned(
                // top: 21,
                child: Text(label2),
                disabledTextColor: Colors.transparent,
                color: Colors.cyan[300],
                // color: Colors.purple[300],
                highlightColor: Colors.blue,
                // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                // ),
                textColor: Colors.white,
                padding: EdgeInsets.only(left: 90, top: 0, right: 100, bottom: 5),
            )
            :Container()
            ),
          ),
                       Container(
            child: Align(
              alignment: Alignment(.00, .99
              ),
        child: _visible
        ?
              MaterialButton(
                height: 70.0,
                minWidth: 100,
                onPressed: () =&gt; changeTextArabic1(),
                onLongPress: () =&gt; changeTextEnglish1(),
                // Positioned(
                // top: 21,
                child: Text(label3),
                disabledTextColor: Colors.transparent,
                color: Colors.cyan[300],
                // color: Colors.purple[300],
                highlightColor: Colors.blue,
                // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
                // ),
                textColor: Colors.white,
                padding: EdgeInsets.only(left: 120, top: 2, right: 118, bottom: 5),
            )
            :Container()
            ),
          ),
          GestureDetector(onPanUpdate: (DragUpdateDetails details) {
          if (details.delta.dx &gt; 0) {
            print(&quot;right swipe english&quot;);
            changeTextEnglish1();
            setState(() {
   
            });
          } else if (details.delta.dx &lt; 0) {
            print(&quot;left swipe arabic&quot;);
            changeTextArabic1();
            setState(() {
            });
          }
      }
      )))))]));}}
     
  </code></pre>