import 'package:flutter/material.dart'; class Post extends StatefulWidget { const Post({Key? key}) : super(key: key); @override State createState() => _PostState(); } class _PostState extends State { @override Widget build(BuildContext context) { return Column( children: [ const DisplayName(), postBody(context), postActionBar(context), ], ); } } class DisplayName extends StatelessWidget { const DisplayName({ Key? key, }) : super(key: key); @override Widget build(BuildContext context) { return 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, ), ], ), ], ); } } 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), bottom: BorderSide(color: Theme.of(context).colorScheme.onSurface), top: 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), ) ], ); }