Leewan
Leewan

Reputation: 31

flutter conditional rendering. Not working?

flutter conditional rendering. Not working?. I did try many ways but it i couldn't find any solution. I want render a widget when the data[index].status is not empty. that my code it didn't work out for me.

NOW i got the another issuess The element type 'Set' can't be assigned to the list type 'Widget'. There is the image of my code

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFecf0f1),
      appBar: AppBar(
        actions: <Widget>[],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.all(10),
              itemCount: data.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  margin: EdgeInsets.all(10),
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: Container(
                      child: Column(
                        children: <Widget>[
                          Container(
                            child: Row(
                              children: <Widget>[
                                Container(
                                  child: Text(data[index].airline,
                                      style: TextStyle(
                                        fontFamily: '',
                                        fontSize: 20,
                                        color: Colors.black,
                                        fontWeight: FontWeight.w300,
                                      )),
                                ),
                                if (data[index].status == null)
                                  {
                                    Container(
                                      child: Text('somthing'),
                                    )
                                  }
                                else
                                  {
                                    Container(
                                      decoration: BoxDecoration(
                                          color: Colors.red[700],
                                          borderRadius:
                                              BorderRadius.circular(20)),
                                      padding: EdgeInsets.symmetric(
                                          vertical: 6, horizontal: 8),
                                      child: Text(
                                        data[index].status,
                                        style: TextStyle(
                                            fontSize: 15,
                                            color: Colors.white,
                                            fontWeight: FontWeight.normal,
                                            fontFamily: 'Raleway'),
                                      ),
                                    ),
                                  }
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}



Upvotes: 0

Views: 1692

Answers (2)

Spatz
Spatz

Reputation: 20138

collection if interprets curly braces after if/else clause not as block of code, but as set literal:

This code compiles ok:

class GoodWidget extends StatelessWidget {
  final bye = false;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      if (bye) Text('Goodbye') else Text('Hello'),
      Text('World!')
    ]);
  }
}

and this code produces an error The element type 'Set<Container>' can't be assigned to the list type 'Widget'

class BadWidget extends StatelessWidget {
  final bye = false;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      if (bye) {Text('Goodbye')} else {Text('Hello')},
      Text('World!')
    ]);
  }
}

Curly brackets are not allowed in this case.

Upvotes: 1

Tinus Jackson
Tinus Jackson

Reputation: 3663

You are setting the data[index].status value to null.

you are using = which means assigining a value instead of == which is the equal check

Your code should be

Row(

    children:<widget>[
      if (data[index].status == null) // note the ==
                         {
                              Container(
                                  child: Text('somthing'),
                                        )
                                      }
                                    else
                                      {
                                        Container(
                                          decoration: BoxDecoration(
                                              color: Colors.red[700],
                                              borderRadius:
                                                  BorderRadius.circular(20)),
                                          padding: EdgeInsets.symmetric(
                                              vertical: 6, horizontal: 8),
                                          child: Text(
                                            data[index].status,
                                            style: TextStyle(
                                                fontSize: 15,
                                                color: Colors.white,
                                                fontWeight: FontWeight.normal,
                                                fontFamily: 'Raleway'),
                                          ),
                                       ),
                                      }

    ]
    )

Image to help with Operators - Taken from reference(1)

References

  1. Dart: Operators - Nice to read

Upvotes: 0

Related Questions