main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Web3 News',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
      ),
      home: const NewsPage(),
    );
  }
}

class NewsPage extends StatefulWidget {
  const NewsPage({super.key});

  @override
  State<NewsPage> createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  int _currentIndex = 0;
  final List<String> _circles = ['Blockchain', 'DeFi', 'NFT', 'Gaming'];
  final List<List<NewsItem>> _newsItems = [
    [
      NewsItem('Blockchain News 1', 'This is a blockchain news item'),
      NewsItem('Blockchain News 2', 'This is another blockchain news item'),
    ],
    [
      NewsItem('DeFi News 1', 'This is a DeFi news item'),
      NewsItem('DeFi News 2', 'This is another DeFi news item'),
    ],
    [
      NewsItem('NFT News 1', 'This is an NFT news item'),
      NewsItem('NFT News 2', 'This is another NFT news item'),
    ],
    [
      NewsItem('Gaming News 1', 'This is a gaming news item'),
      NewsItem('Gaming News 2', 'This is another gaming news item'),
    ],
  ];

  void _onCircleChanged(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web3 News'),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(40),
          child: Row(
            children: [
              for (int i = 0; i < _circles.length; i++)
                Expanded(
                  child: GestureDetector(
                    onTap: () => _onCircleChanged(i),
                    child: Container(
                      height: 40,
                      color: _currentIndex == i ? Colors.blue : Colors.grey,
                      child: Center(
                        child: Text(_circles[i]),
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: _newsItems[_currentIndex].length,
        itemBuilder: (context, index) {
          return NewsItemCard(
            title: _newsItems[_currentIndex][index].title,
            content: _newsItems[_currentIndex][index].content,
          );
        },
      ),
    );
  }
}

class NewsItem {
  final String title;
  final String content;

  NewsItem(this.title, this.content);
}

class NewsItemCard extends StatelessWidget {
  final String title;
  final String content;

  NewsItemCard({required this.title, required this.content});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Text(content),
          ],
        ),
      ),
    );
  }
}