A demo of the combination of magnification, hiding, and weighting of flutter layout—novice record

Test demo scene:

 Require:

1. Divide the layout into 3 equal parts

2. Click on a single widget to zoom in on the widget (and full screen)

picture: 

Code:

  1. class _EachViewState extends State < EachView > {
  2. List < entity > _list;
  3. @override
  4. void initState() {
  5. // TODO: implement initState
  6. super.initState();
  7. _list = List();
  8. _init();
  9. }
  10. @override
  11. Widget build(BuildContext context) {
  12. return Scaffold(
  13. // title
  14. appBar: AppBar(title: Text(widget._title)),
  15. // Center the subject content
  16. body: Row(
  17. children: < Widget > [
  18. Expanded( // weights
  19. flex: _list[0].flexSize, // set the scale parameter
  20. child: getWidget(Colors.deepOrange, 1, _list[0].isHide)
  21. ),
  22. Expanded(
  23. flex: _list[1].flexSize,
  24. child: getWidget(Colors.greenAccent, 2, _list[1].isHide)
  25. ),
  26. Expanded(
  27. flex: _list[2].flexSize,
  28. child: getWidget(Colors.amberAccent, 3, _list[2].isHide)
  29. ),
  30. ],
  31. )
  32. );
  33. }
  34. Widget getWidget(Color c, int code, bool isShow){
  35. return Offstage( // for widget hiding
  36. offstage: isShow, // hide parameter settings
  37. child:Container(
  38. color: c,
  39. height: 120,
  40. child: MaterialButton( // button
  41. onPressed: (){
  42. if(code == 1){
  43. print("1111");
  44. setState(() {
  45. if(_list[0].enlarge){
  46. _init();
  47. }else{
  48. _change(0);
  49. }
  50. });
  51. }
  52. if(code == 2){
  53. print("2222");
  54. setState(() {
  55. if(_list[1].enlarge){
  56. _init();
  57. }else{
  58. _change(1);
  59. }
  60. });
  61. }
  62. if(code == 3){
  63. print("3333");
  64. setState(() {
  65. if(_list[2].enlarge){
  66. _init();
  67. }else{
  68. _change(2);
  69. }
  70. });
  71. }
  72. }
  73. ),
  74. ),
  75. );
  76. }
  77. _init(){
  78. _list.clear();
  79. _list
  80. ..add(entity(1, 120, false, false))
  81. ..add(entity(1, 120, false, false))
  82. ..add(entity(1, 120, false, false));
  83. }
  84. _change(int code){
  85. for(int i = 0; i < _list.length; i++){
  86. if(code == i){
  87. _list[i].flexSize = 1; // set weight
  88. _list[i].isHide = false; // hide the button
  89. _list[i].enlarge = true; // enlarge
  90. }else{
  91. _list[i].flexSize = 0; //Set the proportion to 0
  92. _list[i].isHide = true; // hide button
  93. _list[i].enlarge = false; // do not process
  94. }
  95. }
  96. }

Notice:

1. There is no click event in the Container layout, so MaterialButton is added to the layout to test the click event

2. The 3 Container layouts are equally divided by the Expanded weight setting. In this case, the width of the current layout can be set to 0 through the Expanded property flex = 0, that is, the weight is set to 1:0:0, so the result is The first Container is enlarged (full screen), and other Containers cannot see the parts.

3. If a layout with its own size is added to the Container, such as MaterialButton, please pay attention to the second item to set the full weight, it is impossible to achieve full screen effect, you need to hide the MaterialButton with Offstage first, and then set the weight to achieve full screen .

 

Test demo:  https://download.csdn.net/download/m0_37039192/11441404

Related: A demo of the combination of magnification, hiding, and weighting of flutter layout—novice record