Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool isConnected = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void toggleConnection() {
    setState(() {
      isConnected = !isConnected;
      if (isConnected) {
        _controller.stop();
      } else {
        _controller.repeat(reverse: true);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Row(
          children: [
            Icon(Icons.signal_cellular_alt, color: Colors.blue),
            SizedBox(width: 8),
            Text('Hiddify', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            Text(' 1.6.0', style: TextStyle(fontSize: 12)),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {},
            child: Row(
              children: [
                Text('Import', style: TextStyle(color: Colors.blue)),
                Icon(Icons.add, color: Colors.blue),
              ],
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SizedBox(height: 20),
            Text('The Traxex', style: TextStyle(fontSize: 18)),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: [
                    Icon(Icons.data_usage, color: Colors.blue),
                    Text('Remaining traffic'),
                    Text('985 of 1000 (GB)'),
                  ],
                ),
                Column(
                  children: [
                    Icon(Icons.timer, color: Colors.blue),
                    Text('Remaining time'),
                    Text('10 months'),
                  ],
                ),
              ],
            ),
            SizedBox(height: 40),
            Stack(
              alignment: Alignment.center,
              children: [
                ScaleTransition(
                  scale: Tween(begin: 1.0, end: 1.2).animate(CurvedAnimation(
                    parent: _controller,
                    curve: Curves.easeInOut,
                  )),
                  child: Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      gradient: RadialGradient(
                        colors: [Colors.blue.shade100, Colors.blue],
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: toggleConnection,
                  child: Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: isConnected ? Colors.green.shade700 : Colors.blue,
                    ),
                    child: Icon(Icons.power_settings_new, color: Colors.white, size: 50),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              isConnected ? 'Connected' : 'Disconnected',
              style: TextStyle(color: isConnected ? Colors.green : Colors.red),
            ),
            Text('Ping: 89 ms'),
            Spacer(),
            Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.2),
                    spreadRadius: 2,
                    blurRadius: 5,
                  ),
                ],
              ),
              child: Row(
                children: [
                  Image.network(
                    'https://placehold.co/40x40?description=Flag%20of%20Germany',
                    width: 40,
                    height: 40,
                  ),
                  SizedBox(width: 10),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Direct TUIC'),
                      Text('IP: xxx.xxx.xxx.xxx'),
                    ],
                  ),
                  Spacer(),
                  Text('Cloudflare'),
                  Icon(Icons.arrow_forward_ios, color: Colors.blue),
                ],
              ),
            ),
            SizedBox(height: 20),
            BottomNavigationBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'Profile',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.settings),
                  label: 'Settings',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}