wsp we need to make a dashboard on flutter. we will have five screen. on all of the screen we'll have sidebar which will have max w400 also h for all of the page. at the top of the sidebar we will have text "netpc.space" positioned x128 y63 under it we'll have a cardlike which wi'll contain user icon(static) more right we'll have username at the top and after it logout button with icon(small) under it we'll show user balance(api request(for example make 10000)) again we'll have somespace after this transparent cardlike and after we'll have text Основное colored purple under it we'll have button but icon and text on it won't be ideally under the Основное text, only button need's to be under it ideally by the way when we'll aim on it or switch to this tab it will change colorfilter from transparent to black first button will have name Главное now we stop doing sidebar and switch to main content which will be right sidebar we'll have a picture here positioned x523 y74 and have w1176 h184 border radius 12 grey color in it we'll have positioned x578 y132 says Добро пожаловать, username with w800 h50 under it we'll have text Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами with grey color positioned x577 y191 and w1084 h40 after it we'll make server list which can be accessed from api but for example we'll make two server with abstract names let's start we'll have text My server positioned x523 y314 under it we'll have first server but their count depend on user server by the way for example we'll have only two it will be a transparent box but with colorfilter black positioned x523 y380 also w1176 h139 in it we'll have germany flag positioned x577 y412 also w34 h37 next to it we'll have server name you want positioned x625 y417also w334 h28 under it we'll have connect adress info positioned x579 y448 also w221 h24 coloured grey after it we'll have server info like cpu info positioned x1235 y413 with w132 h37 after that ram info by the way all server info look's like button's but their onclick info is zero and they have border radius and color filter grey let's continue ram info is x1382 y413 also w132 h37 after it disk info positioned x1529 y413 also w132 h37 under it we'll have button call Управление with setting icon color #532E41 also positioned x1531 y460 with black colorfilter  and repeat this for all of the server we'll have background #09090A text is white when don't mention it color we'll perform http reqest later for now make example like


import 'package:flutter/material.dart';

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

class NetpcSpaceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Netpc.Space Dashboard',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xFF532E41),
        scaffoldBackgroundColor: Color(0xFF09090A),
        fontFamily: 'Roboto',
        textTheme: TextTheme(
          bodyLarge: TextStyle(color: Colors.white),
          bodyMedium: TextStyle(color: Colors.white),
        ),
      ),
      home: DashboardScreen(),
    );
  }
}

class DashboardScreen extends StatefulWidget {
  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  String selectedTab = 'Главное';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Sidebar(
            selectedTab: selectedTab,
            onTabSelected: (tab) {
              setState(() {
                selectedTab = tab;
              });
            },
          ),
          Expanded(
            child: MainContent(
              selectedTab: selectedTab,
            ),
          ),
        ],
      ),
    );
  }
}

class Sidebar extends StatelessWidget {
  final String selectedTab;
  final Function(String) onTabSelected;

  Sidebar({required this.selectedTab, required this.onTabSelected});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: MediaQuery.of(context).size.height,
      color: Colors.black.withOpacity(0.8), // Enhanced transparency
      padding: EdgeInsets.only(left: 32, top: 63), // Adjusted padding for better layout
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Logo
          Text(
            'netpc.space',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 40), // Spacing between logo and user card
          // User Card with Balance and Logout
          Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.1), // Consistent transparency
              border: Border.all(color: Colors.white30),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    // Static User Icon
                    Icon(
                      Icons.person,
                      color: Colors.white,
                      size: 40,
                    ),
                    SizedBox(width: 16),
                    // Username and Logout IconButton
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'username',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                            ),
                          ),
                          // Logout Button with Only Icon
                          Align(
                            alignment: Alignment.centerLeft,
                            child: IconButton(
                              onPressed: () {
                                // Handle logout
                              },
                              icon: Icon(
                                Icons.logout,
                                color: Colors.white,
                                size: 20,
                              ),
                              tooltip: 'Logout',
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 16),
                // User Balance
                Text(
                  'Balance: 10000',
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 40), // Spacing between user card and sections
          // Основное Section
          Padding(
            padding: const EdgeInsets.only(left: 4.0),
            child: Text(
              'Основное',
              style: TextStyle(
                color: Color(0xFF532E41), // Purple color
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          SizedBox(height: 16),
          // Navigation Buttons
          NavButton(
            icon: Icons.dashboard,
            label: 'Главное',
            isSelected: selectedTab == 'Главное',
            onTap: () => onTabSelected('Главное'),
          ),
          NavButton(
            icon: Icons.settings,
            label: 'Настройки',
            isSelected: selectedTab == 'Настройки',
            onTap: () => onTabSelected('Настройки'),
          ),
          // You can add more navigation buttons here
        ],
      ),
    );
  }
}

class NavButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;
  final VoidCallback onTap;

  NavButton({
    required this.icon,
    required this.label,
    this.isSelected = false,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.only(left: 4, bottom: 16), // Adjusted margin for consistency
        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        decoration: BoxDecoration(
          color: isSelected ? Colors.white24 : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(
              icon,
              color: Colors.white,
            ),
            SizedBox(width: 16),
            Text(
              label,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MainContent extends StatelessWidget {
  final String selectedTab;

  MainContent({required this.selectedTab});

  @override
  Widget build(BuildContext context) {
    if (selectedTab == 'Главное') {
      return MainTab();
    } else if (selectedTab == 'Настройки') {
      return Center(
        child: Text(
          'Настройки',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      );
    }
    // Add more tabs as needed
    return Center(
      child: Text(
        'Unknown Tab',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    );
  }
}

class MainTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(left: 32, top: 32, right: 32, bottom: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Welcome Image and Text
            Container(
              width: double.infinity,
              height: 184,
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                  image: NetworkImage(
                      'https://via.placeholder.com/1176x184.png?text=Welcome+Image'), // Placeholder image
                  fit: BoxFit.cover,
                  colorFilter:
                      ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                ),
              ),
              child: Stack(
                children: [
                  Positioned(
                    left: 20, // Adjusted for better alignment
                    top: 20,
                    child: Text(
                      'Добро пожаловать, username',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        backgroundColor: Colors.black45,
                      ),
                    ),
                  ),
                  Positioned(
                    left: 20,
                    top: 60,
                    child: Text(
                      'Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами',
                      style: TextStyle(
                        color: Colors.grey[300],
                        fontSize: 16,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 50),
            // Server List
            ServerList(),
          ],
        ),
      ),
    );
  }
}

class ServerList extends StatelessWidget {
  // Mock server data
  final List<Map<String, String>> servers = [
    {
      'name': 'Server One',
      'address': '192.168.1.1',
      'cpu': '4 cores',
      'ram': '16GB',
      'disk': '512GB SSD',
      'flag': '🇩🇪', // Germany flag as emoji
    },
    {
      'name': 'Server Two',
      'address': '192.168.1.2',
      'cpu': '8 cores',
      'ram': '32GB',
      'disk': '1TB SSD',
      'flag': '🇺🇸', // USA flag as emoji
    },
    // Add more servers as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'My Servers',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 16),
        ...servers.map((server) => ServerCard(server: server)).toList(),
      ],
    );
  }
}

class ServerCard extends StatelessWidget {
  final Map<String, String> server;

  ServerCard({required this.server});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 139,
      margin: EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.05), // Consistent transparency
        border: Border.all(color: Colors.white30),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            // Flag
            Text(
              server['flag'] ?? '',
              style: TextStyle(fontSize: 34),
            ),
            SizedBox(width: 16),
            // Server Details
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    server['name'] ?? 'Unnamed Server',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Address: ${server['address'] ?? 'N/A'}',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 16,
                    ),
                  ),
                  SizedBox(height: 16),
                  Row(
                    children: [
                      InfoButton(label: 'CPU: ${server['cpu'] ?? 'N/A'}'),
                      SizedBox(width: 8),
                      InfoButton(label: 'RAM: ${server['ram'] ?? 'N/A'}'),
                      SizedBox(width: 8),
                      InfoButton(label: 'Disk: ${server['disk'] ?? 'N/A'}'),
                    ],
                  ),
                ],
              ),
            ),
            // Manage Button
            ElevatedButton.icon(
              onPressed: () {
                // Handle management action
              },
              icon: Icon(
                Icons.settings,
                color: Color(0xFF532E41),
                size: 20,
              ),
              label: Text(
                'Управление',
                style: TextStyle(color: Colors.black),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.white, // Button background color
                padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class InfoButton extends StatelessWidget {
  final String label;

  InfoButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // OnClick info is zero as per specification
      },
      child: Text(label),
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.white,
        backgroundColor: Colors.grey.withOpacity(0.5), // Consistent transparency
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        elevation: 0,
      ),
    );
  }
}


sidebar and content doesn't have any color difference also server info is positioned as i said before no other variant button управление is grey no white also add font neue machina for server card and for welcome card with image unbounded font