Как преобразовать фон реагирования в мобильный код Flutter ⇐ CSS

[Anonymous]

Я работаю над преобразованием веб -приложения React в мобильный код Flutter, и у меня проблемы с простым. Я пытаюсь получить фон для приложения, но после преобразования его вообще не выглядит одинаково.
index.css

Код: Выделить всё

gadeient1 {
background: radial-gradient(83.1% 80.82% at 11.27% 26.03%, #438FFF 0%, #9667F3 35%, #F590F2 64.56%, #FF7717 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.shadow {
box-shadow: 0px 0px 10px 16px #9667F333;

}

.backtext {
color: var(--Labels-Tertiary, #3C3C434D);

}

.bg12 {
background: var(--Fills-Tertiary, #7878801F);
}

Как это должно выглядеть:

Вот код флаттера:
​​.

Код: Выделить всё

import 'package:flutter/material.dart';
import 'package:voiself_mobile/utilities/theme/voiself_colors.dart';

class GradientBackground extends StatelessWidget {
const GradientBackground({super.key});

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
// 1. Combined Radial Gradient
gradient: RadialGradient(
center: Alignment(
_translatePercentage(11.27), // Horizontal center (from CSS)
_translatePercentage(26.03), // Vertical center (from CSS)
),
radius: _calculateRadius(context), // Calculate radius
colors: [
VoiselfColors.white.shade500, // Start with white (from visual)
VoiselfColors.grey.shade300, // Very light off-white
VoiselfColors.lavender.shade400, // Light blue/purple, very faint
VoiselfColors.orange.shade50, // Very faint orange/yellow
],
stops: [
0.0,
0.6, // Adjust stops for subtlety
0.9,
1.0,
],
),
// 2. Subtle Shadow
boxShadow: [
BoxShadow(
color:
VoiselfColors
.darkPurple
.shade100, // Very faint shadow (adjust alpha)
spreadRadius: 1, // Smaller spread
blurRadius: 10, // Less blur
offset: Offset(0, 0),
),
],
// 3. Background Color (from CSS)
color: VoiselfColors.white.shade500,
),
);
}

// Helper function to translate CSS percentage to Flutter Alignment (-1 to 1)
double _translatePercentage(double percentage) {
return (percentage / 50) - 1;
}

// Helper function to calculate the radius based on context
double _calculateRadius(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
return (screenWidth > screenHeight ? screenWidth : screenHeight) *
0.831; // From CSS
}
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... obile-code