Flutter K-Web Toon Demo

readme.md

Flutter K-Web Toon Demo

Created with <3 with dartpad.dev.

flutter_k_webtoon_grid.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
  debugPaintSizeEnabled = false; // Set to true for visual layout
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const showGrid = false; // Set to false to show ListView

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter K-Web Toon Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter K-Web Toon Demo'),
        ),
        body: Center(child: showGrid ? _buildGrid() : _buildList()),
      ),
    );
  }

  // #docregion grid
  Widget _buildGrid() => GridView.extent(
      maxCrossAxisExtent: 150,
//       padding: const EdgeInsets.all(4),
//       mainAxisSpacing: 4,
//       crossAxisSpacing: 4,
      children: _buildGridTileList(10));

  // The images are saved with names pic0.jpg, pic1.jpg...p ic29.jpg.
  // The List.generate() constructor allows an easy way to create
  // a list when objects have a predictable naming pattern.
  List<Container> _buildGridTileList(int count) => List.generate(
      count, (i) => Container(child: Image.network('https://ccdn.lezhin.com/v2/comics/260/images/wide.webp?updated=1626417228107&width=277')));
  // #enddocregion grid

  // #docregion list
  Widget _buildList() {
    return ListView(
      children: [
        _tile('참교육', '월요일', Icons.theaters),
        _tile('신의 탑', '월요일', Icons.theaters),
        _tile('퀘스트지상주의', '월요일', Icons.theaters),
        _tile('김부장', '화요일', Icons.theaters),
        _tile('여신강림', '화요일',
            Icons.theaters),
        _tile('대학원 탈출일지', '화요일', Icons.theaters),
        const Divider(),
        _tile('화산귀환', '수요일', Icons.restaurant),
        _tile('내 남편과 결혼해줘', '수요일', Icons.restaurant),
        _tile(
            '전지적 독자시점', '수요일', Icons.restaurant),
      ],
    );
  }

  ListTile _tile(String title, String subtitle, IconData icon) {
    return ListTile(
      title: Text(title,
          style: const TextStyle(
            fontWeight: FontWeight.w500,
             color: Colors.blueGrey,
            fontSize: 20,
          )),
      subtitle: Text(subtitle),
      leading: Icon(
        icon,
        color: Colors.blue[500],
      ),
    );
  }
  // #enddocregion list
}

main.dart

import 'dart:core';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MainFullDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
      ),
      home: const MyHomePage(title: '내폰내툰'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 // ignore: prefer_typing_uninitialized_variables
  late Map items = {};
  late List toon =[];
  int _selectedIndex = 0;

  getTestData() async {
    try{
      var response = await http.get(Uri.https("api.github.com","gists/911c05847dc802f77b99e7c079bc0849"));
      items = json.decode(utf8.decode(response.bodyBytes));
      var temp = json.decode(items['files']['json-server.json']['content']);
      // doc: https://stackoverflow.com/a/60488766/1425431
      setState( () {
        toon = temp['webtoon'];
      });
    }catch(e){
      print(e);
    }
  }

  @override
  void initState() {
    super.initState();
    getTestData();
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      if(index == 0){
        toon = items['webtoon'];
      }else{
        toon = items['coz'];
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          toolbarHeight: 80,
          title: Text(widget.title,
              style: const TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 36.0,
                  color: Colors.black)),
          centerTitle: true),
      body: Center(
        child: 
        toon.isEmpty ? const Text('loading') : 
        Column(children: <Widget>[
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[0]['title'],
                                author: toon[0]['author'],
                                desc: toon[0]['desc'],
                                link: toon[0]['link'],
                                image: toon[0]['image'])),
                      );
                    },
                    child: Column(children: <Widget>[
                      Image.network(toon[0]['image']),
                      Text(toon[0]['title']),
                    ]))),
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child:GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[1]['title'],
                                author: toon[1]['author'],
                                desc: toon[1]['desc'],
                                link: toon[1]['link'],
                                image: toon[1]['image'])),
                      );
                    },
                    child:  Column(children: <Widget>[
                  Image.network(toon[1]['image']),
                  Text(toon[1]['title']),
                ]))),
          ]),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[2]['title'],
                                author: toon[2]['author'],
                                desc: toon[2]['desc'],
                                link: toon[2]['link'],
                                image: toon[2]['image'])),
                      );
                    },
                    child: Column(children: <Widget>[
                  Image.network(toon[2]['image']),
                  Text(toon[2]['title']),
                ]))),
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[3]['title'],
                                author: toon[3]['author'],
                                desc: toon[3]['desc'],
                                link: toon[3]['link'],
                                image: toon[3]['image'])),
                      );
                    },
                    child: Column(children: <Widget>[
                  Image.network(toon[3]['image']),
                  Text(toon[3]['title']),
                ]))),
          ]),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[4]['title'],
                                author: toon[4]['author'],
                                desc: toon[4]['desc'],
                                link: toon[4]['link'],
                                image: toon[4]['image'])),
                      );
                    },
                    child: Column(children: <Widget>[
                  Image.network(toon[4]['image']),
                  Text(toon[4]['title']),
                ]))),
            Padding(
                padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
                child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => DetailPage(
                                title: toon[5]['title'],
                                author: toon[5]['author'],
                                desc: toon[5]['desc'],
                                link: toon[5]['link'],
                                image: toon[5]['image'])),
                      );
                    },
                    child: Column(children: <Widget>[
                  Image.network(toon[5]['image']),
                  Text(toon[5]['title']),
                ]))),
          ]),
        ]),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: 'My Page',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.construction),
            label: 'Setting',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.lightGreen,
        onTap: _onItemTapped,
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage(
      {Key? key,
      required this.title,
      required this.author,
      required this.desc,
      required this.image,
      required this.link})
      : super(key: key);

  final String title;
  final String author;
  final String desc;
  final String image;
  final String link;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            toolbarHeight: 80,
            title: Text(title,
                style: const TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 36.0,
                    color: Colors.black)),
            centerTitle: true,
           ),
        body: Column(children: [
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Image.network(image),
          ),
          Text(author),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text(desc),
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text('출처: $link'),
          ),
          Center(
            child: ElevatedButton(
              onPressed: () async {
              },
              child: const Text('바로보기'),
            ),
          )
        ]));
  }
}