Can I random to show SizeBox widget? - flutter

Question

I want to show SizeBox widget by random. when I open this class it should be random to show Size Box 1 first or Size Box 2 first.
class Page extends StatelessWidget {
var random = new Random();
int randomNumber;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
randomNumber = random.nextInt(1);
if(randomNumber == 1){
/////////////////////////////////////// Size box 1 ////////////////////////////////////
SizedBox(
child: TextButton(
onPressed: () {
AlertDialog(
title: Text('a'),
content: Text('a'));
},
child: Image.asset('images/test.jpg'),
)),
}else{
/////////////////////////////////////// Size box 2 ////////////////////////////////////
SizedBox(
child: TextButton(
onPressed: () {
AlertDialog(
title: Text('b'),
content: Text('b'));
},
child: Image.asset('images/test2.jpg'),
)),
}
I try to use randomNumber = random.nextInt(1) in children: <Widget>[] but it show
The element type 'int' can't be assigned to the list type 'Widget'.dart(list_element_type_not_assignable)
It seems I cannot write dart code in widget. Can I random to show SizeBox widget ?

Answer 1

The error occurs because you called randomNumber = random.nextInt(1); inside the Row children. Since randomNumber is of type int and not of type Widget you can't do this. One way to fix this is to create a StatefulWidget and set the randomNumber in initState method.
By the way using if/else inside children of Row/Column you don't put the curly brackets {}.
import 'package:flutter/material.dart';
import 'dart:math';
class Page extends StatefulWidget {
#override
_Page createState() => _Page();
}
class _Page extends State<Page> {
var random = new Random();
int randomNumber;
#override
void initState(){
randomNumber = random.nextInt(1);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
if (randomNumber == 1)
/////////////////////////////////////// Size box 1 ////////////////////////////////////
SizedBox(
child: TextButton(
onPressed: () {
AlertDialog(title: Text('a'), content: Text('a'));
},
child: Image.asset('images/test.jpg'),
),
)
else
/////////////////////////////////////// Size box 2 ////////////////////////////////////
SizedBox(
child: TextButton(
onPressed: () {
AlertDialog(title: Text('b'), content: Text('b'));
},
child: Image.asset('images/test2.jpg'),
),
),
],
),
),
],
),
),
);
}
}