name27 / flutter

0 stars 0 forks source link

블로그 앱 map(e) #93

Open name27 opened 1 year ago

name27 commented 1 year ago

image image

main.dart

import 'package:blog_app/pages/main_page.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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: MainPage(),
    );
  }
}

main_page.dart

import 'package:blog_app/model/post.dart';
import 'package:blog_app/widget/postTile.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

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

  Future<List<Post>> getData() async {
    var dio = Dio();
    var url = 'https://jsonplaceholder.typicode.com/posts';
    var res = await dio.get(url);
    if (res.statusCode == 200) {
      var data = List<Map<String, dynamic>>.from(res.data);
      return data.map((e) => Post.fromMap(e)).toList();
    }
    return [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: FutureBuilder(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.data != null) {
                return ListView.separated(
                  itemCount: snapshot.data?.length ?? 0,
                  itemBuilder: (context, index) =>
                      PostTile(post: snapshot.data![index]),
                  separatorBuilder: (context, index) {
                    if (index % 5 == 4) {
                      return Padding(
                        padding:
                            const EdgeInsets.only(left: 20, top: 8, bottom: 8),
                        child: Text(
                          'Post ${snapshot.data![index].id + 1} ~ ${snapshot.data![index].id + 5}',
                          style: TextStyle(fontSize: 30),
                        ),
                      );
                    }
                    return SizedBox();
                  },
                );
              }
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

postTile.dart

import 'package:blog_app/model/post.dart';
import 'package:flutter/material.dart';

class PostTile extends StatelessWidget {
  const PostTile({super.key, required this.post});
  final Post post;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      post.title,
                      style:
                          TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                    ),
                    Divider(),
                    Text(
                      post.body,
                      style: TextStyle(fontSize: 15),
                    ),
                  ],
                ),
              );
            });
      },
      child: Container(
        child: ListTile(
          leading: CircleAvatar(
            child: Text('${post.id}'),
          ),
          title: Text(
            post.title,
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
          ),
          subtitle: Container(
            width: 350,
            child: RichText(
              overflow: TextOverflow.clip,
              maxLines: 4,
              strutStyle: StrutStyle(fontSize: 10.0),
              text: TextSpan(
                text: post.body,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

post.dart

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post(
      {required this.userId,
      required this.id,
      required this.title,
      required this.body});

  Post.fromMap(Map<String, dynamic> map)
      : userId = map["userId"],
        id = map["id"],
        title = map["title"],
        body = map["body"];
}