FixedResolutionViewport change color of black border

Question

In the documentation of FixedResolutionViewport of Flame, it says that the color of the black border around the viewport (when it doesn't fit into the screen) is configurable (defaulted to black). I couldn't find a way to configure this color. Is there an example where this is being done?

From the documentation:

So for example, if the viewport happens to be the same ratio of the screen, it will resize to fit 100%. But if they are different ratios, it will resize the most it can and then will add black (color is configurable) borders.

Answer 1

You can have a Look at this :

Link: https://pub.dev/packages/flutter_screenutil

dependencies:
  flutter_screenutil: ^5.1.1

---

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: () =>
          MaterialApp(
            //... other code
            builder: (context, widget) {
              //add this line
              ScreenUtil.setContext(context);
              return MediaQuery(
                //Setting font does not change with system font size
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: widget,
              );
            },
            theme: ThemeData(
              textTheme: TextTheme(
                //To support the following, you need to use the first initialization method
                  button: TextStyle(fontSize: 45.sp)
              ),
            ),
          ),
    );
  }
}