trans Dart

[AlainFerg]

transforme ce code en Dart-Flutter:function MainComponent() {
const [currentView, setCurrentView] = useState("main");
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showBottomNav, setShowBottomNav] = useState(true);
const [selectedLanguage, setSelectedLanguage] = useState("Français");
const [userData, setUserData] = useState(null);
const [showPaymentModal, setShowPaymentModal] = useState(false);
const [showLanguageModal, setShowLanguageModal] = useState(false);
const [showErrorModal, setShowErrorModal] = useState(false);
const [newLanguage, setNewLanguage] = useState(null);
const [formData, setFormData] = useState({
nom: "",
postnom: "",
prenom: "",
counterId: "",
});
const [showSplash, setShowSplash] = useState(true);

useEffect(() => {
if (!isLoggedIn) {
setShowBottomNav(false);
}
}, [isLoggedIn]);

useEffect(() => {
const timer = setTimeout(() => {
setShowSplash(false);
}, 2000);
return () => clearTimeout(timer);
}, []);

const handleLanguageChange = (lang) => {
setNewLanguage(lang);
setShowLanguageModal(true);
};
const confirmLanguageChange = () => {
setSelectedLanguage(newLanguage);
setShowLanguageModal(false);
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};

const handleSubmit = () => {
if (
!formData.nom ||
!formData.postnom ||
!formData.prenom ||
!formData.counterId
) {
setShowErrorModal(true);
return;
}
setUserData(formData);
setIsLoggedIn(true);
setShowBottomNav(true);
};

const ErrorModal = () => (

Attention

Veuillez remplir toutes les informations avant de continuer

<button
onClick={() => setShowErrorModal(false)}
className="bg-[#FFD700] text-black font-bold py-3 px-6 rounded-lg hover:bg-[#FFC800] transition duration-300"
>
Compris

);

const LoginForm = () => (

PowerPay

Connexion

{showErrorModal && }

);
const BackgroundImage = () => (

<div
className="w-full h-full bg-cover bg-center opacity-10 blur-md"
style={{
backgroundImage: "Powerpay 1.jpg",
}}
/>

);
const BuyPowerButton = () => (

<button
onClick={() => setShowPaymentModal(true)}
className="text-[#FFD700] text-2xl relative"
>

);

const BuyPowerModal = () => (

Buy Power

<button
onClick={() => setShowPaymentModal(false)}
className="text-[#FFD700]"
>

Tarifs Électricité

CDF

1 kWh = 2000 FC

USD

1 kWh = 1 USD

{["AirtelMoney", "OrangeMoney", "M-Pesa", "Compte bancaire"].map(
(method) => (

{method}

),
)}

);
const LanguageConfirmModal = () => (

Confirmer le changement de langue

Voulez-vous vraiment changer la langue en {newLanguage} ?

Confirmer

<button
onClick={() => setShowLanguageModal(false)}
className="flex-1 bg-[#242424] text-white font-bold py-3 rounded-lg hover:bg-[#303030] transition duration-300 border border-[#FFD700]"
>
Annuler

);
const MainContent = () => (

PowerPay

{userData && (

{userData.nom} {userData.postnom} {userData.prenom}



ID: {userData.counterId}

)}

Solde Actuel

0.00 USD

Dernier Paiement

Aucun paiement récent

);
const Account = () => (

Mon Compte

Informations Personnelles

Nom

{userData?.nom || "N/A"}

Postnom

{userData?.postnom || "N/A"}

Prénom

{userData?.prenom || "N/A"}

ID Compteur

{userData?.counterId || "N/A"}

Paiements Récents

Aucun paiement récent

);

const Settings = () => (

Paramètres

Langue

{["Français", "Lingala", "Swahili", "Anglais"].map((lang) => (
<button
key={lang}
onClick={() => handleLanguageChange(lang)}
className={p-4 rounded-lg border-2 transition duration-300 flex items-center justify-between ${ selectedLanguage === lang ? "bg-[#FFD700] text-black border-[#FFD700]" : "bg-[#242424] text-white border-[#FFD700] hover:bg-[#303030]" }}
>
{lang}
{selectedLanguage === lang && (

)}

))}

Sécurité

Changer le mot de passe

);

if (showSplash) {
return (

PowerPay

);
}

if (!isLoggedIn) {
return (

);
}

return (

{showPaymentModal && }
{showLanguageModal && }
{currentView === "main" && }
{currentView === "account" && }
{currentView === "settings" && }
{showBottomNav && (

<button
onClick={() => setCurrentView("main")}
className={text-[#FFD700] flex flex-col items-center ${ currentView === "main" ? "opacity-100" : "opacity-70" }}
>

Accueil

<button
onClick={() => setCurrentView("account")}
className={text-[#FFD700] flex flex-col items-center ${ currentView === "account" ? "opacity-100" : "opacity-70" }}
>

Compte

<button
onClick={() => setCurrentView("settings")}
className={text-[#FFD700] flex flex-col items-center ${ currentView === "settings" ? "opacity-100" : "opacity-70" }}
>

Paramètres

)}
<style jsx global>{`
@Keyframes pulse {
0% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.2; }
100% { transform: scale(1); opacity: 0.5; }
}

    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes glow {
      0% { box-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700; }
      50% { box-shadow: 0 0 20px #FFD700, 0 0 25px #FFD700, 0 0 30px #FFD700; }
      100% { box-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700; }
    }
    
    @keyframes lightTrail {
      0% { transform: rotate(0deg); opacity: 0.6; }
      100% { transform: rotate(360deg); opacity: 0.2; }
    }

    .glow-effect {
      animation: glow 2s infinite;
    }

    .glow-text {
      text-shadow: 0 0 10px #FFD700;
      animation: glow 2s infinite;
    }

    .light-trail {
      animation: lightTrail 2s linear infinite;
    }

    .light-trail-text::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, #FFD700, transparent);
      animation: lightTrail 2s linear infinite;
    }
    
    .account-view {
      animation: slideIn 0.3s ease-out;
    }
  `}</style>
</div>

);
}