Why is the return after my if-Condition underlined in red? I refer to the if in the stack widget in the body

Viewed 46

That's the error:


lib/main.dart:728:16: Error: Unexpected token 'return'. return Text('Passt!');

lib/main.dart:728:37: Error: Expected '}' before this. return Text('Passt!');

class Screen2 extends StatelessWidget {
  final String title;

  const Screen2(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Warum du das noch erledigen solltest?'),
            backgroundColor: Colors.transparent),
        body: Stack(
          children: <Widget>[
            if(title == 'Milchprodukt') {
               return Text('Passt!')
},
            Align(
                alignment: Alignment.center,
                child: Text('\nClick here',
                    style: TextStyle(color: Colors.blue[700], fontSize: 30))),
            Align(
                alignment: Alignment(0, 0.1),
                child: Text(
                  '\n(Wenn du die genauen Zusammenhänge verstehen willst)',
                  style: TextStyle(fontSize: 15),
                  textAlign: TextAlign.center,
                ))
          ],
        ),
        backgroundColor: Colors.orange[200]);
  }
}
3 Answers
if(variable=='some value')
Text('Hello'),

Just Remove the return from Text() widget and it will work.

you should not use brackets inside widget body for if. also if a widget has children you should not use return keyword. here is the fixed code: class Screen2 extends StatelessWidget {

  final String title;

  const Screen2(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Warum du das noch erledigen solltest?'),
            backgroundColor: Colors.transparent),
        body: Stack(
          children: <Widget>[
            if(title == 'Milchprodukt') 
               Text('Passt!')
,
            Align(
                alignment: Alignment.center,
                child: Text('\nClick here',
                    style: TextStyle(color: Colors.blue[700], fontSize: 30))),
            Align(
                alignment: Alignment(0, 0.1),
                child: Text(
                  '\n(Wenn du die genauen Zusammenhänge verstehen willst)',
                  style: TextStyle(fontSize: 15),
                  textAlign: TextAlign.center,
                ))
          ],
        ),
        backgroundColor: Colors.orange[200]);
  }
}

In:

children: <Widget>[
  if(title == 'Milchprodukt') {
    return Text('Passt!')
  },
  ...
],

you're using a collection-if. This isn't the same as an if statement. The body of a collection-if and of a collection-for can contain only elements, not statements (such as return). You also can't use curly braces ({ ... }) with them since those are used to group statements.

You instead should use just:

children: <Widget>[
  if(title == 'Milchprodukt')
    Text('Passt!'),
  ...
],

I highly recommend reading https://medium.com/dartlang/making-dart-a-better-language-for-ui-f1ccaf9f546c which explains the motivation and design for collection-if and collection-for.

Related