Arna
Arna Framework - A unique set of widgets for building applications with Flutter.
This Framework is in active development. Any contribution, idea, criticism or feedback is welcomed.
Content
- Arna
- Content
- Getting Started
- Usage
- Arna App
- Arna Scaffold
- Arna Side Scaffold
- Arna Master Detail Scaffold
- Arna Button
- Arna Icon Button
- Arna Text Button
- Arna Linked Buttons
- Arna Popup Menu Button
- Arna Segmented Control
- Arna CheckBox
- Arna CheckBox List Tile
- Arna Radio
- Arna Radio List Tile
- Arna Switch
- Arna Switch List Tile
- Arna List
- Arna Expansion Panel
- Arna Card
- Arna Badge
- Arna Dividers
- Arna Separators
- Arna PopupDialog
- Arna Alert Dialog
- Arna Text Field
- Arna Slider
- Arna Slider List Tile
- Arna Tooltip
- Arna Indicator
- Arna Search Field
- Arna Snack Bar
- Arna Banner
- TODO
- Special thanks
Getting Started
Add Arna as a dependency in your pubspec.yaml
dependencies:
arna: ^0.3.5
And import it
import 'package:arna/arna.dart';
Usage
Arna App
ArnaApp(
debugShowCheckedModeBanner: false,
theme: ArnaThemeData(
accentColor: ArnaColors.accentColor,
brightness: Brightness.light,
),
home: Home(),
);
Arna Scaffold
ArnaScaffold(
headerBarLeading: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
title: "Title",
headerBarTrailing: ArnaIconButton(
icon: Icons.info_outlined,
onPressed: () {},
),
body: Container(),
);
Arna Side Scaffold
ArnaSideScaffold(
headerBarLeading: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
title: "Title",
headerBarTrailing: ArnaIconButton(
icon: Icons.info_outlined,
onPressed: () {},
),
items: [
NavigationItem(
title: "Dummy",
icon: Icons.info_outlined,
builder: (_) => Container(),
),
NavigationItem(
title: "Dummy",
icon: Icons.info_outlined,
builder: (_) => Container(),
),
],
);
Arna Master Detail Scaffold
ArnaMasterDetailScaffold(
headerBarLeading: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
title: "Title",
headerBarTrailing: ArnaIconButton(
icon: Icons.info_outlined,
onPressed: () {},
),
emptyBody : Container(),
items: [
MasterNavigationItem(
title: "Title 1",
subtitle: "Subtitle 1",
builder: (_) => Container(),
),
MasterNavigationItem(
title: "Title 2",
subtitle: "Subtitle 2",
builder: (_) => Container(),
),
],
);
Arna Button
ArnaButton(
label: "Add",
icon: Icons.add_outlined,
onPressed: () {},
);
Arna Icon Button
ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
tooltipMessage: "Add",
);
Arna Text Button
ArnaTextButton(
label: "Add",
onPressed: () {},
tooltipMessage: "Add",
);
Arna Linked Buttons
ArnaLinkedButtons(
buttons: [
ArnaLinkedButton(
label: "Add",
icon: Icons.add_outlined,
onPressed: () {},
tooltipMessage: "Add",
),
ArnaLinkedButton(
icon: Icons.add_outlined,
onPressed: () {},
tooltipMessage: "Add",
),
ArnaLinkedButton(
label: "Add",
onPressed: () {},
tooltipMessage: "Add",
),
],
);
Arna Popup Menu Button
ArnaPopupMenuButton<String>(
itemBuilder: (context) => [
ArnaPopupMenuItem(
child: Text(
"First Item",
style: ArnaTheme.of(context).textTheme.textStyle,
),
value: "First Item",
),
const ArnaPopupMenuDivider(),
ArnaPopupMenuItem(
child: Text(
"Second Item",
style: ArnaTheme.of(context).textTheme.textStyle,
),
value: "Second Item",
),
],
onSelected: (String value) => showArnaSnackbar(
context: context,
message: value,
),
);
Arna Segmented Control
ArnaSegmentedControl(
groupValue: segmentedControlGroupValue,
children: {0: "Item 1", 1: "Item 2", 2: "Item 3"},
onValueChanged: (int i) => setState(() => segmentedControlGroupValue = i),
);
Arna CheckBox
ArnaCheckBox(
value: _throwShotAway,
onChanged: (bool? newValue) => setState(() => _throwShotAway = newValue!),
);
Arna CheckBox List Tile
ArnaCheckBoxListTile(
value: _throwShotAway,
title: "Title",
subtitle: "Subtitle",
onChanged: (bool? newValue) => setState(() => _throwShotAway = newValue!),
trailingButton: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna Radio
ArnaRadio<SingingCharacter>(
value: SingingCharacter.lafayette,
groupValue: _character,
onChanged: (SingingCharacter newValue) => setState(() => _character = newValue),
);
Arna Radio List Tile
ArnaRadioListTile<SingingCharacter>(
value: SingingCharacter.lafayette,
groupValue: _character,
title: "Title",
subtitle: "Subtitle",
onChanged: (SingingCharacter newValue) => setState(() => _character = newValue),
trailingButton: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna Switch
ArnaSwitch(
value: _giveVerse,
onChanged: (bool newValue) => setState(() => _giveVerse = newValue),
);
Arna Switch List Tile
ArnaSwitchListTile(
value: _giveVerse,
title: "Title",
subtitle: "Subtitle",
onChanged: (bool newValue) => setState(() => _giveVerse = newValue),
trailingButton: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna List
ArnaList(
title: "Title",
items: [
ArnaListTile(
title: "Title 1",
subtitle: "Subtitle 1",
trailing: ArnaBadge(title: "Badge 1"),
onTap: () {},
),
ArnaListTile(
title: "Title 2",
subtitle: "Subtitle 2",
trailing: ArnaBadge(title: "Badge 2"),
),
],
);
Arna Expansion Panel
ArnaExpansionPanel(
title: "Title 1",
subtitle: "Subtitle 1",
child: Container(),
);
Arna Card
ArnaCard(
height: 200,
width: 200,
child: Container(),
);
Arna Badge
ArnaBadge(title: "Title");
Arna Dividers
ArnaHorizontalDivider();
ArnaVerticalDivider();
Arna Separators
ArnaHorizontalSeparator();
ArnaVerticalSeparator();
Arna PopupDialog
ArnaIconButton(
icon: Icons.info_outlined,
onPressed: () => showArnaPopupDialog(
context: context,
title: "Title",
body: Container(),
),
);
Arna Alert Dialog
ArnaIconButton(
icon: Icons.info_outlined,
onPressed: () => showArnaDialog(
context: context,
barrierDismissible: true,
dialog: ArnaAlertDialog(
title: "Title",
message: "Message",
primary: ArnaTextButton(
label: "OK",
onPressed: Navigator.of(context).pop,
),
),
),
);
Arna Text Field
ArnaTextField(
obscureText: true,
);
Arna Slider
ArnaSlider(
value: _sliderValue,
min: 0,
max: 100,
onChanged: (double newValue) {
setState(() => _sliderValue = newValue);
},
);
Arna Slider List Tile
ArnaSliderListTile(
value: _sliderValue,
title: "Title",
subtitle: "Subtitle",
onChanged: (double newValue) {
setState(() => _sliderValue = newValue);
},
trailingButton: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna Tooltip
ArnaTooltip(
message: _sliderValue,
child: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna Indicator
ArnaIndicator(value: 0.35);
Arna Search Field
ArnaSearchField(
showSearch: showSearch,
controller: controller,
);
Arna Snack Bar
showArnaSnackbar(
context: context,
message: "SnackBar Title",
trailing: ArnaIconButton(
icon: Icons.add_outlined,
onPressed: () {},
),
);
Arna Banner
ArnaBanner(
showBanner: showBanner,
title: "This is an information banner!",
trailing: ArnaIconButton(
icon: Icons.close_outlined,
onPressed: () => setState(() => showBanner = false),
),
);
TODO
- Dropdown Button
- Date and Time Pickers
- Chip
Special thanks
- flutter for flutter.
- bdlukaa for fluent_ui.
- GroovinChip for macos_ui.
- gtk-flutter for libadwaita.
- ubuntu for yaru_widgets.dart and yaru.dart.
- tvolkert for chicago.
- rsms for inter.
- WangYng for better_cupertino_slider.
- MingSern for flutter_bounceable.
![[WIP] changes in header bar](https://avatars.githubusercontent.com/u/3498335?v=4)
3 Dec 27, 2022
0 Dec 29, 2021
33 Dec 12, 2022
8 Nov 11, 2022
18 Dec 20, 2022
1.3k Jan 4, 2023
1 May 15, 2022
2 Aug 20, 2022
5 Dec 5, 2022
3 Aug 10, 2022
2 Aug 29, 2022
14 Oct 17, 2022
419 Jan 4, 2023
101 Jan 17, 2022
8 Feb 2, 2022
3 Sep 26, 2022
243 Jan 1, 2023
3 Jan 4, 2021