Open name27 opened 1 year ago
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(), ); } }
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(); }, ), ), ); } }
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, ), ), ), ), ), ); } }
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"]; }
main.dart
main_page.dart
postTile.dart
post.dart