Create a build method which randomly selects one object of a class and transfers in it parameters of object

user_17418552 0
Viewed 53

I`m new in flutter (dart). I create a class with three fields (frontColor, angle and rearColor), also based on this class I created six objects with parameters (here I insert only two of them). I need a widget that will randomly select one of the objects and display it using SizedBox in child (here must be our Widget), like:

Center(
  child: SizedBox(
    height: 142,
    width: 141,
    child: ... 
  ),
),

Here is my class and objects which I create:

class Circle {
 Color frontColor;
 ColorFilter rearColor;
 double angle;

 Circle(
  this.frontColor,
  this.rearColor,
  this.angle,
 );
}
Circle firstCircle = Circle(
 const Color(0xFF41AB9D),
 const ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
 0.0,
);
Circle fourthCircle = Circle(
 const Color(0xFF49C1B0),
 const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
 360 / 30,
);

In result I should get something like that but the parameters must be transmitted externally:

Widget _circleBackground() {
  return Container(
  width: 141,
  height: 142,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(2500.0),
    color: const Color(0xFF41AB9D),
    image: const DecorationImage(
      colorFilter: ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
      image: AssetImage('...'),
    ),
  ),
);}
flutter-layout dart flutter android-emulator mobile
1 Answers

You can use a stream, add a variable of type Widget as a state variable in a statefulWidget and change that variable inside listen, as shown below:

on main.dart:

    import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:futurebuildertest/circle.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget child = Container();
  final List<Circle> widgets = [firstCircle, secondCircle, fourthCircle];
  final StreamController streamController = StreamController();

  @override
  void initState() {
    super.initState();
    child = _circleBackground(firstCircle);
    streamController.stream.listen((_) {
      Circle param = widgets[Random().nextInt(3)];
      setState(() {
        child = _circleBackground(param);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Column(children: [
        Expanded(
          child: Center(child: child)
        ),
        ElevatedButton(
          onPressed: () {
            streamController.add("");
          },
          child: Container(
            padding: const EdgeInsets.all(16),
            child: const Text("Change"),
          )
        )
      ]),
    );
  }

  Widget _circleBackground(Circle circle) {
    return Container(
      width: 141,
      height: 142,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(2500.0),
        color: circle.frontColor,
      ),
      child: const SizedBox(
        height: 100,
        width: 100,
      ),
    );
  }
}

on circle.dart

import 'package:flutter/material.dart';

class Circle {
  final Color frontColor;
  final ColorFilter rearColor;
  double angle;

  Circle(
    this.frontColor,
    this.rearColor,
    this.angle,
  );
}
Circle firstCircle = Circle(
  const Color(0xFFF56302),
  const ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
  0.0,
);
Circle secondCircle = Circle(
  const Color(0xFF1EFF00),
  const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
  360 / 30,
);
Circle fourthCircle = Circle(
  const Color(0xFF49C1B0),
  const ColorFilter.mode(Color(0xFF41AB9D), BlendMode.srcATop),
  360 / 30,
);

this is just a poc to demonstrate how it can be done.

user_92800900
Related