Flutter - How to make a Material Button stationery while scrolling page

Question

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

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.

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 ..

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 "material buttons" 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 ....

please help

EDITED THE CODE TO ONLY SHOW THE ISSUE AND GOT RID OF COMMENTED CODE to show just one stack. -

LAYOUT USED: Stack and laid out Image with single scroll and closed it off and after that added the Raised button,

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 ?

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() => _AliflaammeemState();
}

class _AliflaammeemState extends State<Aliflaammeem> {

  changeTextEnglish() {
    setState(() {
      bool _visible = true;
         _visible =  _visible;
      textHolder = "All Praise and Thanks is to Allah the lord of the worlds";
    });
  }

  changeTextArabic() {
    bool _visible = true;
    setState(() {
      _visible =  _visible;
    });
  }

  @override
  Widget build(BuildContext context) {



   SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
    return Scaffold(
        body: Stack(
          children: <Widget>[
        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: () => 0,
        //         child: Text("Static "))
                
        //    ),
        // ),   
              
           Container(
          child: Align(
            alignment: Alignment(.00, -.8
            ),
          child: _visible
              ? MaterialButton(
              height: 70.0,
              // minWidth: 36.5,
              // minWidth: 85.0,
              minWidth: 100.0,
              onPressed: () => changeTextArabic1(),
              onLongPress: () => 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: () => changeTextArabic1(),
              onLongPress: () => 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: () => changeTextArabic1(),
              onLongPress: () => 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< labels.length; i++)
               Container(
          child: Align(
            alignment: Alignment(.00, 0.54
            ),
      child: _visible
      ?
            MaterialButton(
              height: 70.0,
              minWidth: 100,
              onPressed: () => changeTextArabic1(),
              onLongPress: () => 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: () => changeTextArabic1(),
              onLongPress: () => 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 > 0) {
          print("right swipe english");
          changeTextEnglish1();
          setState(() {
 
          });
        } else if (details.delta.dx < 0) {
          print("left swipe arabic");
          changeTextArabic1();
          setState(() {
          });
        }
    }
    )))))]));}}
   

Answer 1

UPDATE:

After some research I've concluded that you can use floatingActionButton and floatingActionButtonLocation to position a floatingActionButton that will not be affected by scrolling. You could also use Center of Align to position it where you want.

I hope this works for you!

Original post:

I think the easiest and most efficient way would be to use a raisedButton passed in buttomNavigationBar. I've seen people using a CustomScrollView but the button kind of stutters when doing that. buttonNavigationBar seems to be the best way to go. You can use color and elevation to blend in with your background.

Don't forget to flag this as an answer if it was any help!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final text = "echo\n" * 1000;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Static button"),
        ),
        body: SingleChildScrollView(child: Text(text)),
        bottomNavigationBar: Container(
            color: Colors.white,
            child: RaisedButton(
                color: Colors.white,
                elevation: 0,
                onPressed: () => 0,
                child: Text("Static Button"))),
      ),
    );
  }
}

Answer 2

I think you had to many Stack. I just removed a few and made this working example. Hope it's what you wanted.

class Aliflaammeem extends StatefulWidget {
  @override
  _AliflaammeemState createState() => _AliflaammeemState();
}

class _AliflaammeemState extends State<Aliflaammeem> {
  var nameList = new List<String>();
  final items = List<String>.generate(20, (i) => "Item ${i + 1}");

  List<MaterialButton> buttonsList = new List<MaterialButton>();

  @override
  void initState() {
    super.initState();
    nameList.add("I love");
    nameList.add("my ALLAH");
    nameList.add("SWT Very Much");
  }

  List<String> labels = ['apple', 'banana', 'pineapple', 'kiwi'];
  bool _visible = true;
  int _counter = 0;
  double _initial = 0.0;

  var textHolder = "";

  changeTextEnglish() {
    setState(() {
      _visible = true;
      textHolder = "All Praise and Thanks is to Allah the lord of the worlds";
    });
  }

  changeTextArabic() {
    setState(() {
      _visible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';
    return Scaffold(
        body: Center(
            child: Stack(fit: StackFit.expand, children: <Widget>[
      SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              height: 300,
            ),
            Container(
              color: Colors.blue,
              height: 300,
            ),
            Container(
              color: Colors.green,
              height: 300,
            ),
            Container(
              color: Colors.yellow,
              height: 300,
            ),
          ],
        ),
      ),
      Container(
        child: Align(
          alignment: Alignment(.27, 0.1),
          child: _visible
              ? MaterialButton(
                  height: 70.0,
                  minWidth: 85.0,
                  onPressed: () => changeTextArabic(),
                  onLongPress: () => changeTextEnglish(),
                  child: Text('$textHolder'),
                  color: Colors.cyan[400],
                  highlightColor: Colors.blue,
                  textColor: Colors.white,
                  padding: EdgeInsets.only(left: 10, top: 2, right: -1, bottom: 5),
                )
              : Container(),
        ),
      ),
      for (int i = 0; i < labels.length; i++)
        Container(
          child: Align(
            alignment: Alignment(-.5, 0.1),
            child: MaterialButton(
              height: 70.0,
              minWidth: 36.5,
              onPressed: () => changeTextArabic(),
              onLongPress: () => changeTextEnglish(),
              child: Text(labels[i]),
              disabledTextColor: Colors.transparent,
              color: Colors.cyan[300],
              highlightColor: Colors.blue,
              textColor: Colors.white,
              padding: EdgeInsets.only(left: 46, top: 2, right: -20, bottom: 5),
            ),
//  ),
          ),
        ),
      GestureDetector(onPanUpdate: (DragUpdateDetails details) {
        if (details.delta.dx > 0) {
          print("right swipe english");
          changeTextEnglish();
          setState(() {});
        } else if (details.delta.dx < 0) {
          print("left swipe arabic");
          changeTextArabic();
          setState(() {});
        }
      })
    ])));
  }
}