How to get click and change debug text to dev top right corner red debug banner?

Question

I'm trying to change the name of that banner "debug" to "dev", "stage", "prod". programmatically

I want to do some action on the click of that debug banner.

I want to override all functionality of that debug banner.

Do I just have to create a new custom banner using this:

https://api.flutter.dev/flutter/widgets/Banner-class.html

Or is there any approach.

Does that debug banner is just showing it in debug mode only? Is it possible to make to use multiple purpose.

Thanks in advance.

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        ),
        Align(
          alignment: Alignment.topRight,
          child: Container(
            padding: EdgeInsets.only(top: 55, right: 50),
            child: Banner(
              message: "Custom",
              location: BannerLocation.bottomStart,
            ),
          ),
        ),
      ],
    );
  }
}

Answer 2

I think that in order for you to do this you not only have to create your own Banner but you also need to create your own WidgetsApp. Not like a MaterialApp that wraps options around a WidgetsApp, but your own WidgetsApp. Which means you'll have to copy flutter's code for WidgetsApp and modify from there.