In dev2, I am using column as below code ```Colum...

# compose

[amar_1995]

In dev2, I am using column as below code

Column(
   crossAxisSize = LayoutSize.Expand,
   mainAxisSize = LayoutSize.Expand) { ... }

Using this, I am trying to show hidden data after onClick occur. But it is not working dev3. In dev3, as onClick occur hidden data overlap with the next Column data.
How to achieve this in dev3

[amar_1995]

Before onClick

[amar_1995]

After onClick occur

[matvei]

Can you show me a snipped of the code in dev03, which is not working?

[amar_1995]

val open by +state {false}
	Padding(10.dp) {
            Clickable({
                open = !open
            }) {
                Column(
//                crossAxisSize = LayoutSize.Expand
//                    modifier = LayoutSize.Expand,
                    modifier = ExpandedWidth
                ) {
                    Row(
//                        crossAxisSize = LayoutSize.Wrap,
//                        mainAxisSize = LayoutSize.Expand
                    arrangement = Arrangement.SpaceEvenly
                    ) {
                        Column(modifier = Flexible(1f)) {
                            Text(..)
                            if(!open)
                            Text(....)
                        }
                        WidthSpacer(width = 10.dp)
                        Column(
//                            crossAxisAlignment = CrossAxisAlignment.Center,
//                            mainAxisAlignment = MainAxisAlignment.Center
                            arrangement = Arrangement.Center
                        ) {
                            Container(
                                width = 20.dp,
                                height = 20.dp,
                                alignment = Alignment.BottomCenter
                            ) {
                                DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)
                            }
                        }
                    }
                    if(open) {
                        Padding(padding = 10.dp) {
                            var value by +state { "Text" }
                            FlexColumn() {
                                expanded(1f) {
                                    Column {
                                        FlexRow() {
                                            expanded(1f) {
                                                Text("")
                                            }
                                            inflexible {
                                                Button(
                                                    text = "...",
                                                    style = OutlinedButtonStyle(
                                                        shape = RoundedCornerShape(5.dp),
                                                        contentColor = (+MaterialTheme.colors()).primary,
                                                        border = Border(
                                                            color = Color.Black,
                                                            width = 1.dp
                                                        )
                                                    ),
                                                    onClick = {
                                                        ...
                                                    }
                                                )
                                            }
                                        }
										ShowString(text)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

[amar_1995]

All commented part is previous part of dev2

[matvei]

I'm not sure I can clearly understand what's going on in this code.
1. It has mix of modifiers and FlexColumn/FlexRow. I don't believe this mix in one Column will work very well.
2. and inside FlexColumn and FlexRow you use expanded {} DSL with, IIUC, intention to expand to the whole screen, but this won't work, there's a modifier ExpandedHeight/ExpandedWidth for it.
My recommendation will be to use one appraoch and move away from FlexColumn/FlexRow complitely, as well as Padding composables and try again.

[amar_1995]

Okay, I will give it a try.
Thanks

[amar_1995]

Yes, It worked after removing FlexRow/FlexColumn
Code also looks clear now
Thanks

[matvei]

No problem 🙂

[codeslubber]

@amar_1995 can you post the revised code?? I had some dev02 axis modifier crap that did not work in 03 as well..

[amar_1995]

var open by +state { false }
Padding(10.dp) {
	Clickable({
		open = !open
	}) {
		Column(
			modifier = ExpandedHeight
		) {
			Row{
				Column(modifier = Flexible(1f)) {
					Text(...)
					if(!open)
					Text(...)
				}
				WidthSpacer(width = 10.dp)
				Container(
					width = 20.dp,
					height = 20.dp,
					alignment = Alignment.BottomCenter
				) {
					DrawImage(+imageResource(R.drawable.navigate_next), Color.Black)

				}
			}
			if(open) {
				Padding(padding = 10.dp) {
					var value by +state { "Text" }
					Column() {
						Row() {
							Column(Flexible(1f)) {}
							Button(
								text = "...",
								style = OutlinedButtonStyle(
									shape = RoundedCornerShape(5.dp),
									contentColor = (+MaterialTheme.colors()).primary,
									border = Border(
										color = Color.Black,
										width = 1.dp
									)
								),
								onClick = {...}
							)
						}
						ShowString(value)
					}
				}
			}
		}
	}
}

[codeslubber]

nice and clean…

[matvei]

Not sure if it's sarcasm or not 🙂

But this is one of the reasons why modifiers were introduced. To remove this DSL for FlexColumn/Stack, which felt wrong and was adding a lot of unnecessary nesting. So I'm glad if you find it better than before 🙂

[codeslubber]

No it does look nice, I love Compose..

[Dmitri Sh]

@matvei are you suggesting FlexColumn is to be avoided in general?

[matvei]

Yep, it will be deprecated in dev04.

Use Column/Row and apply Flexible modifier to children you want to make flexible

[Dmitri Sh]

bummer 🙂 just used Flex to build a sample project and based on that advised others to use it - back to the drawing board and retracting the advice 😰

[matvei]

Haha, sorry 🙂 Anyway, the concept of Flex stays, it's just API changes slightly, so it should be an easy migration

[Dmitri Sh]

no worries, it comes with the territory - working with alpha apis 🙂