Want to Show an AlertDialog when clicking on a Button, on Pressed Method shows an error. ( Undefined name 'context' .)

Question

Hey im New in learning Flutter and Dart. Please help me. :) I really don´t know what to do I`m a totaly beginner. :/

Now I have pastet my complete code I hope you can see where I defined my Container. This all is a TabView because I want to train an play with some examples so I tryed out the TabView. In The TabView I packed then all in Containers. If there is a better option, you can tell me of course also. :)

This is my Code:

Future<void> _showAlert(BuildContext context) async {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
          title: Text('Accept?'),
          content: Text("Do you accept?"),
          actions: <Widget>[
            FlatButton(onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text('No')
            ),
            FlatButton(onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text('Yes')
            ),
          ],
          backgroundColor: Colors.deepOrange,
          shape: CircleBorder(),
        );
    }
        );

}

class MyApp extends StatelessWidget {
  List<Widget> containers = [
    Container(
      color: Colors.orange,
      padding: EdgeInsets.all(20.0),
      alignment: Alignment.center,
      child: Container(
        height: 80,
        width: 80,
        child: FloatingActionButton(
          child: Icon(Icons.check),
          tooltip: ('"Hello World"'),
          onPressed: () {
            print('Hello World');
          },
          backgroundColor: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),
    Container(
      color: Colors.teal,
      alignment: Alignment.center,
      child: RaisedButton(
        onPressed: () {
          print("Raised Button clicked!");
        },
        child: Text(
          "Please click on me!",
          style: TextStyle(fontSize: 18),
        ),
      ),
    ),





    Container(
      color: Colors.deepPurple,
      alignment: Alignment.center,
      child: RaisedButton(onPressed: () {_showAlert(context);},
      color: Colors.deepOrange,
      child: Icon(Icons.warning)
      ),
    ),
  ];

The Error says: Undefined name 'context'. (In the onPresssed section at my Button.)

Error shown

Code Snippet 1

Code Snippet 2

Answer 1

What you are missing in your Stateless widget is the build method(Which contains the context), but the issue there is that you can't return a List with the build method because it only returns a Widget. In order to fix this, you should first create a function for your list of widgets, then inside the Stateless widget return the function inside of a widget with a children property, like a Column

Your Widget list function

widgetList(BuildContext context) {
  return [ 
    Container(
      color: Colors.orange,
      padding: EdgeInsets.all(20.0),
      alignment: Alignment.center,
      child: Container(
        height: 80,
        width: 80,
        child: FloatingActionButton(
          child: Icon(Icons.check),
          tooltip: ('"Hello World"'),
          onPressed: () {
            print('Hello World');
          },
          backgroundColor: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),

    Container(
      color: Colors.teal,
      alignment: Alignment.center,
      child: RaisedButton(
        onPressed: () {
          print("Raised Button clicked!");
        },
        child: Text(
          "Please click on me!",
          style: TextStyle(fontSize: 18),
        ),
      ),
    ),
    Container(
      color: Colors.deepPurple,
      alignment: Alignment.center,
      child: RaisedButton(
          onPressed: () {
            _showAlert(context);
          },
          color: Colors.deepOrange,
          child: Icon(Icons.warning)),
    ),
  ];
}

Your Stateless Widget

class MyApp extends StatelessWidget {

  @override Widget build(BuildContext context) {
    return  Column(
      children: 
        widgetList(context)


    );
    }
}