scaling the timeline

This commit is contained in:
zoe 2022-07-03 15:47:24 +02:00
parent c63f062640
commit ee081de0ab
14 changed files with 202 additions and 63 deletions

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:localization/localization.dart';
import 'package:slothmu/pages/chat/chat.dart';
import 'package:slothmu/pages/notifications/notifications.dart';
import 'package:slothmu/pages/timeline/timeline.dart';
@ -47,13 +48,16 @@ class _MainScaffoldState extends State<MainScaffold> {
onDestinationSelected: (index) =>
setState(() => this.index = index),
selectedIndex: index,
destinations: const [
NavigationDestination(icon: Icon(Icons.forum), label: "Timeline"),
NavigationDestination(icon: Icon(Icons.chat), label: "Chat"),
destinations: [
NavigationDestination(
icon: Icon(Icons.notifications), label: "Notifications"),
icon: const Icon(Icons.forum), label: "timeline".i18n()),
NavigationDestination(
icon: Icon(Icons.settings), label: "Settings"),
icon: const Icon(Icons.chat), label: "chat".i18n()),
NavigationDestination(
icon: const Icon(Icons.notifications),
label: "notifications".i18n()),
NavigationDestination(
icon: const Icon(Icons.settings), label: "settings".i18n()),
]),
),
);

82
lib/partials/post.dart Normal file
View file

@ -0,0 +1,82 @@
import 'package:flutter/material.dart';
class Post extends StatefulWidget {
const Post({Key? key}) : super(key: key);
@override
State<Post> createState() => _PostState();
}
class _PostState extends State<Post> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
const Icon(
Icons.face,
size: 64,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"first name display last name name",
style: Theme.of(context).textTheme.titleMedium,
),
Text(
"@alice_exampleuser@example.com",
style: Theme.of(context).textTheme.bodySmall,
),
],
),
],
),
postBody(context),
postActionBar(context),
],
);
}
}
Widget postBody(context) {
return Container(
padding: const EdgeInsets.fromLTRB(24, 6, 6, 6),
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Theme.of(context).colorScheme.onSurface),
),
),
child: RichText(
textAlign: TextAlign.start,
text: const TextSpan(
text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Diam in arcu cursus euismod quis viverra. Elementum sagittis vitae et leo duis."),
),
);
}
Widget postActionBar(context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.reply),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.repeat),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.favorite_outline),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.more_horiz),
)
],
);
}

35
lib/partials/thread.dart Normal file
View file

@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import 'package:slothmu/partials/post.dart';
class Thread extends StatefulWidget {
const Thread({Key? key}) : super(key: key);
@override
State<Thread> createState() => _ThreadState();
}
class _ThreadState extends State<Thread> {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(24),
width: MediaQuery.of(context).size.width / 1.2,
constraints: const BoxConstraints(maxWidth: 1000, minWidth: 375),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
border: Border.symmetric(
horizontal: BorderSide(
color: Theme.of(context).colorScheme.background,
width: 12)),
),
child: Column(
children: [Post(), Post(), Post()],
),
),
],
);
}
}