title: Jetpack Compose Floating Action Button is not showing up
body: <p>I have a bottom sheet dialog. For the dialog, I'm using <code>ModalBottomSheetDialog</code> from the <code>Accompanist</code> navigation library. In the dialog which is a composable fun that named <code>PlatformsScreen</code>, I have a <code>LazyColumn</code> with items that has <code>RadioButton</code>. Whenever any of the radio buttons is selected I'm adding the selected item into the <code>selectedPlatforms</code> which is a <code>mutableList</code>:</p>
  <pre><code>@Composable
  fun PlatformsScreen(
      modifier: Modifier = Modifier,
      navController: NavController,
      viewModel: PlatformsScreenViewModel = hiltViewModel(),
  ) {
      // this is the platforms that I fetch from network
      val platforms = viewModel.platforms.observeAsState()
  
      val listState = rememberLazyListState()
  
      //this is the platforms that I selected from the platforms list
      val selectedPlatforms by rememberSaveable {
          mutableStateOf(mutableListOf&lt;Platform&gt;())
      }
      
      DefaultScreenUI(toolbar = {
          BottomSheetDialogToolbar(title = &quot;Platforms&quot;)
      },
          floatingActionButton = {
              //This is not working
              AnimatedVisibility(visible = selectedPlatforms.size &gt; 0,
                  enter = expandVertically(),
                  exit = shrinkVertically())
              {
                  ApplyFilterFab()
              }
          }
      ) {
  
          when (platforms.value) {
              is Resource.Loading -&gt; {
                  LoadingItem()
              }
              is Resource.Error -&gt; {
                  ErrorItem(message = platforms.value!!.error!!,
                      onRetryClick = viewModel::setRefresh)
              }
              is Resource.Success -&gt; {
                  if (platforms.value!!.data!!.isNotEmpty()) {
                      LazyColumn(modifier = modifier.fillMaxSize(), state = listState) {
                          items(count = platforms.value!!.data!!.size) {
                              //platform item
                              PlatformItem(
                                  platform = platforms.value!!.data!![it],
                              ) { platform, selected -&gt;
                                  Timber.d(selectedPlatforms.size.toString())
                                  if (!selected) {
                                      selectedPlatforms.remove(platform)
                                  } else {
                                      selectedPlatforms.add(platform)
                                  }
                              }
                          }
                      }
                  } else {
                      //empty view
                  }
              }
  
          }
  }
  }
  </code></pre>
  <p>The <code>DefaultScreenUI</code> is also a composable fun with <code>Scaffold</code> :</p>
  <pre><code>@Composable
  fun DefaultScreenUI(
      toolbar: (@Composable () -&gt; Unit)? = null,
      floatingActionButton: (@Composable () -&gt; Unit)? = null,
      fabPos: FabPosition = FabPosition.End,
      content: @Composable () -&gt; Unit,
  ) {
      val scaffoldState = rememberScaffoldState()
      Scaffold(
          scaffoldState = scaffoldState,
          topBar = { toolbar?.invoke() },
          floatingActionButton = { floatingActionButton?.invoke() },
          floatingActionButtonPosition = fabPos) {
          Box(modifier = Modifier
              .fillMaxSize()
              .background(MaterialTheme.colors.primary)) {
              content()
          }
      }
  }
  </code></pre>
  <p>Here is also my <code>PlatformItem</code> composable:</p>
  <pre><code>
  @Composable
  fun PlatformItem(
      modifier: Modifier = Modifier,
      platform: Platform,
      onItemSelected: (Platform,Boolean) -&gt; Unit
  ) {
      var selected by rememberSaveable {
          mutableStateOf(false)
      }
  
      Row(modifier = modifier
          .fillMaxWidth()
          .height(40.dp)
          .clickable {
              selected = !selected
              onItemSelected(platform,selected)
          },
          horizontalArrangement = Arrangement.SpaceBetween,
          verticalAlignment = Alignment.CenterVertically
      ) {
  
          Text(
              modifier = Modifier.padding(start = dimensionResource(id = R.dimen.dimen_8)),
              text = platform.name!!,
              style = MaterialTheme.typography.subtitle1,
              color = MaterialTheme.colors.onPrimary)
  
          RadioButton(selected = selected, onClick = {
              selected = !selected
              onItemSelected(platform,selected)
          })
  
      }
  }
  
  </code></pre>
  <p>What I'm trying to do is whenever any of the items in the list has selected which means <code>selectedPlatforms.size &gt; 0</code> I want to show the <code>FloatingActionButton</code> in the dialog and hide the button if <code>selectedPlatforms</code> is empty. Here is the result:</p>
  <p><img src="https://i.stack.imgur.com/R0rTs.gif" width="300"></p>
  <p>As you can see it is not showing up. What should I do?</p>