How to Build a Social Poll Post Card in Flutter (Full Code + Preview)
A poll in a feed has to do two things at once: look inviting before anyone taps, and turn into a readable result chart the instant they do. This tutorial builds the Pulse poll post in Flutter: a single `_choice` int drives the whole card, `_OptionRow` swaps from an indigo outline pill to a `FractionallySizedBox` result bar with a percentage and a `check_circle` on your pick, `_votesLabel` abbreviates 1204 to 1.2k, and a second, already-ended poll shows the final-results state with taps disabled.
What you'll build
- ✓A `_PollCard` that re-renders every option from one nullable `_choice` int, with `onVote(int)` injected so real submission is a one-line wire-up
- ✓A two-state `_OptionRow`: a `_surfaceAlt` outline pill before voting and a `ClipRRect` + `FractionallySizedBox` result bar tinted to the option's percentage afterwards
- ✓A `_votesLabel` getter that turns 1204 into '1.2k votes', and an `_initials` getter that builds the monogram from the author's name
- ✓An ended-poll variant that loads already resolved, passes `onTap: null` to every row, and reads 'Final results · ended'
- ✓A gradient `_Monogram` avatar, a `_Dot` separator for the meta line, and an `_ActionBar` with like, reply, share and bookmark
Step-by-step build
Create the file
Add a new file at lib/social_feed_poll/social_feed_poll_screen.dart in your Flutter project.
Register the bundled fonts
No external packages — this is pure Flutter. It does bundle its design font (Inter), so drop the font file into fonts/ and declare it in pubspec.yaml:
flutter:
fonts:
- family: Inter
fonts:
- asset: fonts/Inter-Regular.ttfBuild it, piece by piece
Here's how the screen goes together. Each block below is a real slice of the code with a plain-English explanation — paste them in order, or grab the whole file from the next section.
Two callbacks, six colours and a StatefulWidget
import 'package:flutter/material.dart';
/// Poll Post — an inline poll card with painted result bars. The hero poll is
/// interactive: tap an option to cast a vote and the outline rows switch to
/// tinted result bars with percentages and your choice highlighted. A second,
/// already-ended poll shows the final-results state. Self-contained per
/// CONVENTIONS.md: pure Flutter, bundled Inter font, own dark theme, SafeArea,
/// overflow-proof.
class SocialFeedPollScreen extends StatefulWidget {
const SocialFeedPollScreen({
super.key,
this.onBack,
this.onVote,
});
final VoidCallback? onBack;
final ValueChanged<int>? onVote;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF0B0B0F);
static const Color _surfaceAlt = Color(0xFF1D1D26);
static const Color _brand = Color(0xFF6E56F7);
static const Color _hairline = Color(0xFF26262F);
static const Color _textHi = Color(0xFFF4F4F7);
static const Color _muted = Color(0xFF8A8A99);
@override
State<SocialFeedPollScreen> createState() => _SocialFeedPollScreenState();
}
class _SocialFeedPollScreenState extends State<SocialFeedPollScreen> {
int? _choice;
static const List<_Option> _live = <_Option>[
_Option('Faster search', 46),
_Option('Threaded replies', 29),
_Option('Custom themes', 15),
_Option('Scheduled posts', 10),
];
static const List<_Option> _ended = <_Option>[
_Option('Weekly digest', 58),
_Option('Daily digest', 27),
_Option('No digest', 15),
];`SocialFeedPollScreen` is a `StatefulWidget` because one thing on this page changes: which option the reader picked. It takes `onBack` and `onVote` (a `ValueChanged<int>`) so the host app hears the chosen index without the screen knowing anything about a backend. The palette is a near-mono dark set — `_bg` #0B0B0F, `_surfaceAlt` #1D1D26, `_hairline` #26262F — with a single indigo `_brand` #6E56F7 used for everything that means 'you' or 'act here'. State is just `int? _choice`; null means unvoted. The two option lists are `static const` `_Option(label, pct)` records. `_live` sums to exactly 100 (46+29+15+10) and so does `_ended` (58+27+15), which matters because the percentages are what size the result bars later.
The feed: one live poll, one ended poll
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: SocialFeedPollScreen._bg,
body: SafeArea(
child: Column(
children: <Widget>[
_TopBar(onBack: widget.onBack),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
_PollCard(
name: 'Maya Chen',
handle: 'mayabuilds',
time: '3h',
colorA: 0xFF6E56F7,
colorB: 0xFF9B8CFF,
question: 'Which should ship first in v2?',
options: _live,
choice: _choice,
voted: _choice != null,
totalVotes: 1204,
footer: '1 day left',
ended: false,
onVote: (int i) {
setState(() => _choice = i);
widget.onVote?.call(i);
},
),
_PollCard(
name: 'Dev Kapoor',
handle: 'devk',
time: '2d',
colorA: 0xFF34D399,
colorB: 0xFF6E56F7,
question: 'How often do you want the Pulse digest?',
options: _ended,
choice: 0,
voted: true,
totalVotes: 3820,
footer: 'Final results · ended',
ended: true,
onVote: (_) {},
),
const SizedBox(height: 24),
],
),
),
],
),
),
),
);
}
}`build` wraps everything in `Theme(data: ThemeData.dark(useMaterial3: true))` so Material defaults like the `IconButton` ripple match the dark surface without leaking the host app's light theme. Under `SafeArea`, a `Column` holds the `_TopBar` and an `Expanded` `ListView` with `padding: EdgeInsets.zero` so the first card's hairline sits flush against the bar. The interesting part is how the two `_PollCard`s differ only by props. The live card passes `choice: _choice`, `voted: _choice != null`, `ended: false`, and an `onVote` that calls `setState(() => _choice = i)` then forwards to `widget.onVote?.call(i)`. The ended card hard-codes `choice: 0`, `voted: true`, `ended: true`, and an `onVote: (_) {}` no-op — it renders as final results without any state of its own. The gradient pairs (`0xFF6E56F7`→`0xFF9B8CFF` and `0xFF34D399`→`0xFF6E56F7`) give each author a distinct monogram.
A 56px top bar and the _Option record
class _TopBar extends StatelessWidget {
const _TopBar({this.onBack});
final VoidCallback? onBack;
@override
Widget build(BuildContext context) {
return Container(
height: 56,
padding: const EdgeInsets.only(left: 4, right: 20),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: SocialFeedPollScreen._hairline),
),
),
child: Row(
children: <Widget>[
IconButton(
onPressed: onBack,
icon: const Icon(Icons.arrow_back_ios_new,
size: 18, color: SocialFeedPollScreen._textHi),
),
const Text(
'Poll',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 18,
fontWeight: FontWeight.w700,
letterSpacing: -0.4,
color: SocialFeedPollScreen._textHi,
),
),
],
),
);
}
}
class _Option {
const _Option(this.label, this.pct);
final String label;
final int pct;
}`_TopBar` is a fixed 56px `Container` with a bottom `BorderSide` in `_hairline` — the same separator every card uses, so the bar reads as the first row of the feed rather than a distinct chrome layer. Padding is `left: 4, right: 20`: the small left inset is deliberate because the `IconButton` carries its own 48px hit area, and 4px places the `arrow_back_ios_new` glyph optically where a 16px margin would put plain text. The title 'Poll' is 18px `w700` Inter with `letterSpacing: -0.4`, the same tightening used on the questions further down. `_Option` is a two-field `const` class — `label` and an `int pct` — kept private and minimal so both lists can be `static const` and the whole card tree stays const-constructible where possible.
The poll card header and its two getters
class _PollCard extends StatelessWidget {
const _PollCard({
required this.name,
required this.handle,
required this.time,
required this.colorA,
required this.colorB,
required this.question,
required this.options,
required this.choice,
required this.voted,
required this.totalVotes,
required this.footer,
required this.ended,
required this.onVote,
});
final String name;
final String handle;
final String time;
final int colorA;
final int colorB;
final String question;
final List<_Option> options;
final int? choice;
final bool voted;
final int totalVotes;
final String footer;
final bool ended;
final ValueChanged<int> onVote;
String get _initials {
final List<String> p = name.trim().split(RegExp(r'\s+'));
if (p.length == 1) return p.first.characters.first.toUpperCase();
return (p.first[0] + p.last[0]).toUpperCase();
}
String get _votesLabel {
final String v = totalVotes >= 1000
? '${(totalVotes / 1000).toStringAsFixed(1)}k'
: '$totalVotes';
return '$v votes';
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.fromLTRB(16, 16, 12, 12),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: SocialFeedPollScreen._hairline),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
_Monogram(
initials: _initials,
colorA: Color(colorA),
colorB: Color(colorB),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Flexible(
child: Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 15,
fontWeight: FontWeight.w700,
color: SocialFeedPollScreen._textHi,
),
),
),
const SizedBox(width: 6),
const Icon(Icons.verified,
size: 15, color: SocialFeedPollScreen._brand),
],
),
Text(
'@$handle · $time',
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
],
),
),
const Icon(Icons.more_horiz,
color: SocialFeedPollScreen._muted, size: 22),
const SizedBox(width: 6),
],
),`_PollCard` is a `StatelessWidget` with thirteen required props; it holds no state, so the parent's `_choice` is the single source of truth. Two getters do the string work. `_initials` splits `name` on `RegExp(r'\s+')`, returns the first character upper-cased for a single word, or first-of-first plus first-of-last for 'Maya Chen' → 'MC'. `_votesLabel` divides by 1000 with `toStringAsFixed(1)` only when `totalVotes >= 1000`, so 1204 becomes '1.2k votes' while 820 would stay '820 votes'. The header row puts the `_Monogram` beside an `Expanded` column: the name is in a `Flexible` with `TextOverflow.ellipsis` so a long name truncates instead of pushing the 15px indigo `Icons.verified` off-screen, and the second line concatenates `'@$handle · $time'` in 12.5px `_muted`. `Icons.more_horiz` closes the row with a 6px trailing gap to align with the card's 12px right padding.
Question, option loop, and the vote meta line
const SizedBox(height: 12),
Text(
question,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 16,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
color: SocialFeedPollScreen._textHi,
),
),
const SizedBox(height: 14),
for (int i = 0; i < options.length; i++) ...<Widget>[
_OptionRow(
option: options[i],
voted: voted,
chosen: choice == i,
onTap: ended ? null : () => onVote(i),
),
if (i != options.length - 1) const SizedBox(height: 10),
],
const SizedBox(height: 14),
Row(
children: <Widget>[
Text(
_votesLabel,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
const _Dot(),
Flexible(
child: Text(
footer,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
),
if (voted && !ended) ...<Widget>[
const _Dot(),
const Text(
'You voted',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
color: SocialFeedPollScreen._brand,
),
),
],
],
),
const SizedBox(height: 10),
const _ActionBar(),
],
),
);
}
}The question is 16px `w700` with `letterSpacing: -0.3`. The options come from a collection-for that spreads two widgets per iteration — the `_OptionRow` and, guarded by `if (i != options.length - 1)`, a 10px `SizedBox` — so the gap never trails the last row. Each row receives `chosen: choice == i` and `onTap: ended ? null : () => onVote(i)`; passing null rather than an empty closure is what makes the ended poll genuinely inert instead of silently swallowing taps. The meta line is a `Row` of `_votesLabel`, a `_Dot`, the `footer` in a `Flexible` with ellipsis, and then — only when `voted && !ended` — another `_Dot` plus 'You voted' in `w600` indigo. The ended poll skips that tag because 'Final results · ended' already says the poll is closed. A 10px gap then hands over to the `const _ActionBar()`.
_Dot and the two faces of _OptionRow
class _Dot extends StatelessWidget {
const _Dot();
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: 7),
child: Text(
'·',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 13,
color: SocialFeedPollScreen._muted,
),
),
);
}
}
class _OptionRow extends StatelessWidget {
const _OptionRow({
required this.option,
required this.voted,
required this.chosen,
this.onTap,
});
final _Option option;
final bool voted;
final bool chosen;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
if (!voted) {
return GestureDetector(
onTap: onTap,
child: Container(
height: 46,
alignment: Alignment.center,
decoration: BoxDecoration(
color: SocialFeedPollScreen._surfaceAlt,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: SocialFeedPollScreen._hairline),
),
child: Text(
option.label,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w600,
color: SocialFeedPollScreen._brand,
),
),
),
);
}
return ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
height: 46,
decoration: BoxDecoration(
color: SocialFeedPollScreen._surfaceAlt.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: chosen
? SocialFeedPollScreen._brand
: SocialFeedPollScreen._hairline,
),
),
child: Stack(
children: <Widget>[
FractionallySizedBox(
alignment: Alignment.centerLeft,
widthFactor: (option.pct / 100).clamp(0.0, 1.0),
child: Container(
decoration: BoxDecoration(
color: chosen
? SocialFeedPollScreen._brand.withValues(alpha: 0.30)
: SocialFeedPollScreen._brand.withValues(alpha: 0.12),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
child: Row(
children: <Widget>[
if (chosen) ...<Widget>[
const Icon(Icons.check_circle,
size: 17, color: SocialFeedPollScreen._brand),
const SizedBox(width: 8),
],
Expanded(
child: Text(
option.label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14.5,
fontWeight: chosen ? FontWeight.w700 : FontWeight.w500,
color: SocialFeedPollScreen._textHi,
),
),
),
Text(
'${option.pct}%',
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14,
fontWeight: FontWeight.w700,
color: SocialFeedPollScreen._textHi,
),
),
],
),
),
],
),
),
);
}
}`_Dot` is a middle-dot glyph padded 7px each side, so the meta line separators are typographic rather than drawn. `_OptionRow` branches on `voted`. Before a vote it is a `GestureDetector` around a 46px `_surfaceAlt` container with a 12px radius, a `_hairline` border and the label centred in 14.5px `w600` indigo — the brand colour on the text is the affordance. After a vote the row becomes a `ClipRRect` (needed so the fill respects the rounded corners) around a `Stack`. The bottom layer is a `FractionallySizedBox` aligned `centerLeft` with `widthFactor: (option.pct / 100).clamp(0.0, 1.0)` — the bar's width literally is the percentage. Its fill is `_brand` at alpha 0.30 for the chosen row and 0.12 for the rest, over a card background at `_surfaceAlt.withValues(alpha: 0.6)`. The chosen row also gets a `_brand` border, a 17px `check_circle`, and `w700` text; the others keep the `_hairline` border and `w500`. The percentage sits right-aligned in 14px `w700` outside the `Expanded` label so it never truncates.
Action bar, _Action, and the gradient monogram
class _ActionBar extends StatelessWidget {
const _ActionBar();
@override
Widget build(BuildContext context) {
return const Row(
children: <Widget>[
_Action(icon: Icons.favorite_border, label: '312'),
SizedBox(width: 18),
_Action(icon: Icons.chat_bubble_outline, label: '54'),
SizedBox(width: 18),
_Action(icon: Icons.share_outlined, label: 'Share'),
Spacer(),
Icon(Icons.bookmark_border,
size: 21, color: SocialFeedPollScreen._muted),
SizedBox(width: 8),
],
);
}
}
class _Action extends StatelessWidget {
const _Action({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Icon(icon, size: 20, color: SocialFeedPollScreen._muted),
const SizedBox(width: 6),
Text(
label,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 13,
fontWeight: FontWeight.w500,
color: SocialFeedPollScreen._muted,
),
),
],
);
}
}
class _Monogram extends StatelessWidget {
const _Monogram({
required this.initials,
required this.colorA,
required this.colorB,
});
final String initials;
final Color colorA;
final Color colorB;
@override
Widget build(BuildContext context) {
return Container(
width: 42,
height: 42,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[colorA, colorB],
),
),
child: Center(
child: Text(
initials,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 15,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
);
}
}`_ActionBar` is a fully `const` `Row`: three `_Action`s (favorite_border '312', chat_bubble_outline '54', share_outlined 'Share') separated by 18px, a `Spacer`, then a 21px `bookmark_border` with an 8px trailing gap. Being const means the bar is built once and reused by both cards for free. `_Action` pairs a 20px `_muted` icon with a 13px `w500` label 6px apart, and every glyph stays `_muted` so nothing here competes with the indigo of the poll itself. `_Monogram` is a 42px circle whose `BoxDecoration` uses a `LinearGradient` from `topLeft` to `bottomRight` between the two ints the card passed in as `colorA`/`colorB`, with the initials centred in 15px `w700` white. Because the avatar is painted from the name, the screen loads no network image and can never show a broken-image placeholder.
Full code
The complete, ready-to-paste source. Free to use in your projects — one click copies it all.
import 'package:flutter/material.dart';
/// Poll Post — an inline poll card with painted result bars. The hero poll is
/// interactive: tap an option to cast a vote and the outline rows switch to
/// tinted result bars with percentages and your choice highlighted. A second,
/// already-ended poll shows the final-results state. Self-contained per
/// CONVENTIONS.md: pure Flutter, bundled Inter font, own dark theme, SafeArea,
/// overflow-proof.
class SocialFeedPollScreen extends StatefulWidget {
const SocialFeedPollScreen({
super.key,
this.onBack,
this.onVote,
});
final VoidCallback? onBack;
final ValueChanged<int>? onVote;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF0B0B0F);
static const Color _surfaceAlt = Color(0xFF1D1D26);
static const Color _brand = Color(0xFF6E56F7);
static const Color _hairline = Color(0xFF26262F);
static const Color _textHi = Color(0xFFF4F4F7);
static const Color _muted = Color(0xFF8A8A99);
@override
State<SocialFeedPollScreen> createState() => _SocialFeedPollScreenState();
}
class _SocialFeedPollScreenState extends State<SocialFeedPollScreen> {
int? _choice;
static const List<_Option> _live = <_Option>[
_Option('Faster search', 46),
_Option('Threaded replies', 29),
_Option('Custom themes', 15),
_Option('Scheduled posts', 10),
];
static const List<_Option> _ended = <_Option>[
_Option('Weekly digest', 58),
_Option('Daily digest', 27),
_Option('No digest', 15),
];
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: SocialFeedPollScreen._bg,
body: SafeArea(
child: Column(
children: <Widget>[
_TopBar(onBack: widget.onBack),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
_PollCard(
name: 'Maya Chen',
handle: 'mayabuilds',
time: '3h',
colorA: 0xFF6E56F7,
colorB: 0xFF9B8CFF,
question: 'Which should ship first in v2?',
options: _live,
choice: _choice,
voted: _choice != null,
totalVotes: 1204,
footer: '1 day left',
ended: false,
onVote: (int i) {
setState(() => _choice = i);
widget.onVote?.call(i);
},
),
_PollCard(
name: 'Dev Kapoor',
handle: 'devk',
time: '2d',
colorA: 0xFF34D399,
colorB: 0xFF6E56F7,
question: 'How often do you want the Pulse digest?',
options: _ended,
choice: 0,
voted: true,
totalVotes: 3820,
footer: 'Final results · ended',
ended: true,
onVote: (_) {},
),
const SizedBox(height: 24),
],
),
),
],
),
),
),
);
}
}
class _TopBar extends StatelessWidget {
const _TopBar({this.onBack});
final VoidCallback? onBack;
@override
Widget build(BuildContext context) {
return Container(
height: 56,
padding: const EdgeInsets.only(left: 4, right: 20),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: SocialFeedPollScreen._hairline),
),
),
child: Row(
children: <Widget>[
IconButton(
onPressed: onBack,
icon: const Icon(Icons.arrow_back_ios_new,
size: 18, color: SocialFeedPollScreen._textHi),
),
const Text(
'Poll',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 18,
fontWeight: FontWeight.w700,
letterSpacing: -0.4,
color: SocialFeedPollScreen._textHi,
),
),
],
),
);
}
}
class _Option {
const _Option(this.label, this.pct);
final String label;
final int pct;
}
class _PollCard extends StatelessWidget {
const _PollCard({
required this.name,
required this.handle,
required this.time,
required this.colorA,
required this.colorB,
required this.question,
required this.options,
required this.choice,
required this.voted,
required this.totalVotes,
required this.footer,
required this.ended,
required this.onVote,
});
final String name;
final String handle;
final String time;
final int colorA;
final int colorB;
final String question;
final List<_Option> options;
final int? choice;
final bool voted;
final int totalVotes;
final String footer;
final bool ended;
final ValueChanged<int> onVote;
String get _initials {
final List<String> p = name.trim().split(RegExp(r'\s+'));
if (p.length == 1) return p.first.characters.first.toUpperCase();
return (p.first[0] + p.last[0]).toUpperCase();
}
String get _votesLabel {
final String v = totalVotes >= 1000
? '${(totalVotes / 1000).toStringAsFixed(1)}k'
: '$totalVotes';
return '$v votes';
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.fromLTRB(16, 16, 12, 12),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: SocialFeedPollScreen._hairline),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
_Monogram(
initials: _initials,
colorA: Color(colorA),
colorB: Color(colorB),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Flexible(
child: Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 15,
fontWeight: FontWeight.w700,
color: SocialFeedPollScreen._textHi,
),
),
),
const SizedBox(width: 6),
const Icon(Icons.verified,
size: 15, color: SocialFeedPollScreen._brand),
],
),
Text(
'@$handle · $time',
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
],
),
),
const Icon(Icons.more_horiz,
color: SocialFeedPollScreen._muted, size: 22),
const SizedBox(width: 6),
],
),
const SizedBox(height: 12),
Text(
question,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 16,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
color: SocialFeedPollScreen._textHi,
),
),
const SizedBox(height: 14),
for (int i = 0; i < options.length; i++) ...<Widget>[
_OptionRow(
option: options[i],
voted: voted,
chosen: choice == i,
onTap: ended ? null : () => onVote(i),
),
if (i != options.length - 1) const SizedBox(height: 10),
],
const SizedBox(height: 14),
Row(
children: <Widget>[
Text(
_votesLabel,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
const _Dot(),
Flexible(
child: Text(
footer,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
color: SocialFeedPollScreen._muted,
),
),
),
if (voted && !ended) ...<Widget>[
const _Dot(),
const Text(
'You voted',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
color: SocialFeedPollScreen._brand,
),
),
],
],
),
const SizedBox(height: 10),
const _ActionBar(),
],
),
);
}
}
class _Dot extends StatelessWidget {
const _Dot();
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: 7),
child: Text(
'·',
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 13,
color: SocialFeedPollScreen._muted,
),
),
);
}
}
class _OptionRow extends StatelessWidget {
const _OptionRow({
required this.option,
required this.voted,
required this.chosen,
this.onTap,
});
final _Option option;
final bool voted;
final bool chosen;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
if (!voted) {
return GestureDetector(
onTap: onTap,
child: Container(
height: 46,
alignment: Alignment.center,
decoration: BoxDecoration(
color: SocialFeedPollScreen._surfaceAlt,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: SocialFeedPollScreen._hairline),
),
child: Text(
option.label,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w600,
color: SocialFeedPollScreen._brand,
),
),
),
);
}
return ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
height: 46,
decoration: BoxDecoration(
color: SocialFeedPollScreen._surfaceAlt.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: chosen
? SocialFeedPollScreen._brand
: SocialFeedPollScreen._hairline,
),
),
child: Stack(
children: <Widget>[
FractionallySizedBox(
alignment: Alignment.centerLeft,
widthFactor: (option.pct / 100).clamp(0.0, 1.0),
child: Container(
decoration: BoxDecoration(
color: chosen
? SocialFeedPollScreen._brand.withValues(alpha: 0.30)
: SocialFeedPollScreen._brand.withValues(alpha: 0.12),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
child: Row(
children: <Widget>[
if (chosen) ...<Widget>[
const Icon(Icons.check_circle,
size: 17, color: SocialFeedPollScreen._brand),
const SizedBox(width: 8),
],
Expanded(
child: Text(
option.label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14.5,
fontWeight: chosen ? FontWeight.w700 : FontWeight.w500,
color: SocialFeedPollScreen._textHi,
),
),
),
Text(
'${option.pct}%',
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 14,
fontWeight: FontWeight.w700,
color: SocialFeedPollScreen._textHi,
),
),
],
),
),
],
),
),
);
}
}
class _ActionBar extends StatelessWidget {
const _ActionBar();
@override
Widget build(BuildContext context) {
return const Row(
children: <Widget>[
_Action(icon: Icons.favorite_border, label: '312'),
SizedBox(width: 18),
_Action(icon: Icons.chat_bubble_outline, label: '54'),
SizedBox(width: 18),
_Action(icon: Icons.share_outlined, label: 'Share'),
Spacer(),
Icon(Icons.bookmark_border,
size: 21, color: SocialFeedPollScreen._muted),
SizedBox(width: 8),
],
);
}
}
class _Action extends StatelessWidget {
const _Action({required this.icon, required this.label});
final IconData icon;
final String label;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Icon(icon, size: 20, color: SocialFeedPollScreen._muted),
const SizedBox(width: 6),
Text(
label,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 13,
fontWeight: FontWeight.w500,
color: SocialFeedPollScreen._muted,
),
),
],
);
}
}
class _Monogram extends StatelessWidget {
const _Monogram({
required this.initials,
required this.colorA,
required this.colorB,
});
final String initials;
final Color colorA;
final Color colorB;
@override
Widget build(BuildContext context) {
return Container(
width: 42,
height: 42,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[colorA, colorB],
),
),
child: Center(
child: Text(
initials,
style: const TextStyle(
fontFamily: SocialFeedPollScreen._font,
fontSize: 15,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
);
}
}
Plus bundled 1 binary asset (fonts/images). The CLI and MCP install those for you automatically.
Two faster ways to add it
Copy-paste works, but you can skip it entirely.
1. FlutterKit CLI
One command drops this screen — and its fonts — straight into your project.
$ flutterkit add social-feed-poll2. AI agent (MCP)
Connect FlutterKit's MCP server in Claude or Cursor and just ask your agent to install social-feed-poll — it fetches and writes the files for you.
FAQ
Can I use this poll card in a commercial app?
Yes. FlutterKit screens are free for personal and commercial projects under an MIT-style licence — no key, no attribution line. Copy the code from this page or run `flutterkit add social-feed-poll` and ship it.
Does it need any pub packages or fonts?
No packages — it is pure Flutter with `material.dart` only. The Inter font is referenced by name and is bundled into your project by `flutterkit add social-feed-poll`; if you paste the code by hand, add Inter to `pubspec.yaml` or drop the `fontFamily` lines to fall back to the platform font.
How do I make the percentages come from a server?
Replace the two `static const` lists with data you fetch, keep `_Option(label, pct)` as the shape, and set `totalVotes` from the response. The result bars size themselves from `option.pct / 100`, so as long as the server returns integers that sum to about 100 nothing else changes. Submit the vote inside `onVote` — the screen already forwards the tapped index to `widget.onVote` — and refresh the list when the response arrives.
Why does the ended poll pass `onTap: null` instead of an empty function?
`_PollCard` computes `onTap: ended ? null : () => onVote(i)`. A null callback tells `GestureDetector` there is nothing to listen for, so the row is genuinely inert; an empty closure would still register taps and give feedback that does nothing. In practice the ended card is already in `voted: true` mode, so the outline branch never renders for it anyway.
Which Flutter version is required?
Flutter 3.22 or newer, because the result bars use `Color.withValues(alpha: ...)` and the widgets use `super.key`. On an older SDK swap `withValues(alpha: x)` for `withOpacity(x)` and write the constructor as `{Key? key, ...} : super(key: key)`.
