CODEWITHSUNDEEP
flutterflutter-widget
user13615795
user13615795

Reputation:

display row in flutter if certain condition is true or false

there is a row of widgets in flutter, I want it to be visible on meeting certain condition, if the condition is true it should not be visible and if condition is false it should be visible

below is the code

Container(
      child: Row(
        children: <Widget>[
          // Button send image
         Text("Text1"),
         Text("Text2"),
         Text("Text3"),
         Text("Text4"),

        ],
      ),
      width: double.infinity,
      height: 50.0,
      decoration: BoxDecoration(border: Border(top: BorderSide(color: greyColor2, width: 0.5)), color: Colors.white),
    )

Conditions you can say for instance

int a==b

if true not visible , if false visible

How may I achieve it?

Upvotes: 2

Views: 7325

Answers (3)

Tanuj
Tanuj

Reputation: 2260

You can hide children (rows) inside a Rows Widget by using a combination of if statement and spread operator in dart. This is applicabe to almost all the widgets that has children property. The code would look something like this -

 child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Text(
        "Row 1",
        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
      ),
      Text(
        "Row 2",
        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
      ),

      //Our conditional Rows
      if (_condition) ...[
        Text(
          "Row 3",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
        ),
        Text(
          "Row 4",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
        ),
      ]
    ],
  ),

As you can see first two rows are fixed while the last two rows can be added/removed based on the _condition. This conditional list will be evaluated if _condition is true.

Here is sample app that demonstrate this behavior, this app uses a button to toggle the _condition.

import 'package:flutter/material.dart';

void main() {
  //Run the App Widget
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo App",
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _condition = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Dynamic Row"),
      ),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                "Row 1",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
              Text(
                "Row 2",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
              if (_condition) ...[
                Text(
                  "Row 3",
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                ),
                Text(
                  "Row 4",
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                ),
              ]
            ],
          ),
        ),
      ),
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: RaisedButton(
        color: Colors.red,
        animationDuration: Duration(microseconds: 500),
        child: Text(
          "Toggle",
          style: TextStyle(
            color: Colors.white,
            fontSize: 16.0,
            fontWeight: FontWeight.w600,
          ),
        ),
        onPressed: () {
          setState(() {
            _condition = !_condition;
          });
        },
      ),
    );
  }
}

Here's the output -

App Output

Hope this helps!

Upvotes: 9

shuvo
shuvo

Reputation: 705

    Container(
              child: Row(
                children: <Widget>[
                  // Button send image
                  Text("Text1"),
                  if (a == b)
                    Text("Text2"),
                  Text("Text3"),
                  Text("Text4"),
                ],
              ),
              width: double.infinity,
              height: 50.0,
              decoration: BoxDecoration(
                  border:
                      Border(top: BorderSide(color: greyColor2, width: 0.5)),
                  color: Colors.white),
            ),

You can do the same for parent Container, you just need to add the condition and based on that add widget(Container/Text).

Upvotes: 2

Ibukun Muyide
Ibukun Muyide

Reputation: 1298

This is on the assumption that the whole widget will either be visible or not which is applicable for any row also.

One way of doing it is embedding it within a Visibility widget the visible property of the widget takes a boolean value

Visibility(
  visible: (a == b), // condition here
  child: Container(
  child: Row(
    children: <Widget>[
      // Button send image
     Text("Text1"),
     Text("Text2"),
     Text("Text3"),
     Text("Text4"),

    ],
  ),
  width: double.infinity,
  height: 50.0,
  decoration: BoxDecoration(border: Border(top: BorderSide(color: greyColor2, width: 0.5)), color: Colors.white),
)
)

Another way is to use the expression/operator condition ? (run this part if true) : (run this part if false)

a == b ? 
Container(
  child: Row(
    children: <Widget>[
      // Button send image
     Text("Text1"),
     Text("Text2"),
     Text("Text3"),
     Text("Text4"),

    ],
  ),
  width: double.infinity,
  height: 50.0,
  decoration: BoxDecoration(border: Border(top: BorderSide(color: 
 greyColor2, width: 0.5)), color: Colors.white),
) : Container(), // you can also replace this with Null

you can use Container() which is an empty widget or you can simply put a Null so that no widget will be placed

Upvotes: 5

Related Questions