Question 235514 in Flutter Question posted in
The official Flutter documentation can be found here.

How to write a widget that is always on top | Flutter

I’m developing for Android/iOS and have stumbled upon one problem.

Even if another screen displayed by Navigator.push() or something like the image below, I want the specified widget to continue to be displayed at the bottom.

enter image description here

This means that I want to apply only to the range specified by Navigator.push() instead of moving to another widget such as Hero.
I just want the banner ad to always appear at the bottom of the screen.

Can someone please tell me?

Tags:

3

Answers


  1. 0

    You can wrap your whole app in a stack widget and position your ad in the bottom of your app, and design your app accordingly.

    Or you can use a custom widget for all scaffold body

    class CustomBodyWithAddBanner extends StatelessWidget {
  final Widget child;

  const CustomBodyWithAddBanner({Key? key, required this.child})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: child),
        const Text("Your add here") // Your add widget here
      ],
    );
  }
}

    Use this widget as the body of your scaffold, and manage your ad in this widget.

    Login or Signup to reply.
  2. 0

    You can just write a custom BottomAppBar which is the equivalent of the AppBar just at the bottom of your screens.

    class Bar extends StatefulWidget {
  const Bar({super.key});
  
  @override
  State<Bar> createState() => _BarState();
}

class _BarState extends State<Bar> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: BottomAppBar(
        color: Colors.red,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[Text('Advertisment')
          ],
        ),
      ),
    );
  }
}

    On every screen you can then insert it with the constructor funtion as in:

    class Screen extends StatefulWidget {
  const Screen({super.key});

  @override
  State<Screen> createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
        title: const Text('Advertisment'),
        ),
      bottomNavigationBar:  Bar(),
    );
  }
}
    Login or Signup to reply.
  3. 0

    There are 2 solutions:

    1. Write a Screen like:
    class Test7 extends StatefulWidget {
  const Test7({super.key});

  @override
  State<Test7> createState() => _Test7State();
}

class _Test7State extends State<Test7> {
  bool firstPage = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: firstPage ? const Widget1() : const Widget2(),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
              onPressed: () => onNavBarPressed(),
              icon: const Icon(
                Icons.change_circle_outlined,
                size: 32.0,
              ))
        ],
      ),
    );
  }

  onNavBarPressed() {
    setState(() {
      firstPage = !firstPage;
    });
  }
}

class Widget2 extends StatelessWidget {
  const Widget2({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 150.0,
        width: 150.0,
        color: Colors.blue,
      ),
    );
  }
}

class Widget1 extends StatelessWidget {
  const Widget1({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 150.0,
        width: 150.0,
        color: Colors.red,
      ),
    );
  }
}

    In this way you will swap just the pages. Or The better way (in my opinion), using Pageviewer:
    (So you can use this instead of Test7):

    class Test8 extends StatefulWidget {
  const Test8({super.key});

  @override
  State<Test8> createState() => _Test8State();
}

class _Test8State extends State<Test8> {
  int selectedPage = 0;

  List<Widget> pages = [
    const Widget1(),
    const Widget2(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: pages.length,
        itemBuilder: (BuildContext context, int index) {
          return pages[selectedPage];
        },
      ),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(onPressed: () => selectPage(0), icon: const Icon(Icons.one_k_outlined)),
          IconButton(onPressed: () => selectPage(1), icon: const Icon(Icons.two_k_outlined)),
        ],
      ),
    );
  }

  selectPage(int pageIndex) {
    setState(() {
      selectedPage = pageIndex;
    });
  }
}

    Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search