hybrid_list_tile 1.0.4 hybrid_list_tile: ^1.0.4 copied to clipboard
HybridListTile widget allows creating customized ListTiles with various properties like padding, colors, icons, titles, subtitles, and more.
import 'package:flutter/material.dart';
import 'package:hybrid_list_tile/hybrid_list_tile.dart';
import 'package:hybrid_list_tile/styles/styles.dart';
import 'constants/constants.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Custom List Tile Example')),
body: ListView(children: const [
HybridListTile(
paddingTileTop: 20,
paddingTileBottom: 20,
paddingTileLeft: 16,
paddingTileRight: 16,
tileBackgroundColor: Colors.blue,
borderTileColor: Colors.black,
leadingText: 'AA',
leadingTextColor: Styles.whiteColor,
isOutlined: true,
outlinedColor: Styles.whiteColor,
overTitleLeft: 'Over tittle Bold without ellipsis',
overTitleLeftColor: Styles.whiteColor,
overTitleLeftBold: true,
overTitleRight: 'Over title right needs overflow',
overTitleRightColor: Colors.white,
overTitleRightOverflow: TextOverflow.ellipsis,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Styles.whiteColor,
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left',
underSubtitleLeftColor: Styles.whiteColor,
underSubtitleRight: 'Under subtitle right',
underSubtitleRightColor: Styles.whiteColor,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Styles.whiteColor),
HybridListTile(
paddingTileBottom: 30,
leadingText: 'AA',
leadingTextColor: Styles.secondaryColor,
tileBackgroundColor: Colors.grey,
isOutlined: true,
isLeadingTwoLined: true,
leadingTextLineTwo: 'PP',
outlinedColor: Styles.secondaryColor,
borderTileRadius: 80.0,
overTitleLeft:
'Over tittle Bold wit ellipsis when right overflow whitout over title right',
overTitleLeftOverflow: TextOverflow.ellipsis,
overTitleLeftColor: Styles.whiteColor,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
underSubtitleLeft: 'Under subtitle left',
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 18,
trailingIconColor: Styles.secondaryColor),
HybridListTile(
paddingTileLeft: 20,
paddingTileBottom: 10,
isLeadingIcon: true,
leadingIcon: Icons.tv,
leadingIconColor: Styles.secondaryColor,
isOutlined: true,
outlinedColor: Styles.primaryColor,
borderTileColor: Colors.black,
borderTileRadius: 16.0,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
subtitleOverFlow: TextOverflow.fade,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
underSubtitleLeft: 'Under subtitle left',
underSubtitleLeftColor: Styles.blackColor,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 25,
trailingIconColor: Styles.secondaryColor),
HybridListTile(
paddingTileRight: 35,
isLeadingIcon: true,
leadingIcon: Icons.tv,
leadingIconColor: Colors.purple,
leadingIconBackgroundColor: Styles.secondaryColor,
leadingColor: Styles.secondaryColor,
borderTileColor: Colors.red,
borderTileRadius: 100.0,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
subtitleColor: Colors.purple,
underSubtitleLeft: 'Under subtitle left',
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 50,
trailingIconColor: Styles.secondaryColor),
HybridListTile(
paddingTileTop: 30,
paddingTileLeft: 35,
paddingTileRight: 65,
isLeadingIcon: true,
leadingIcon: Icons.tv,
tileBackgroundColor: Colors.amber,
leadingIconColor: Styles.primaryColor,
leadingIconBackgroundColor: Styles.secondaryColor,
leadingColor: Styles.secondaryColor,
coloredBackgoundOutlineColor: Styles.primaryColor,
borderTileColor: Colors.green,
splashTileColor: Colors.red,
borderTileRadius: 5.0,
title:
'Title by default is two lined but you can specify an overflow to make it one lined',
titleOverFlow: TextOverflow.ellipsis,
subtitleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
needsSubtitleTwoLined: true,
underSubtitleLeft: 'Under subtitle left',
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 10,
trailingIconColor: Styles.whiteColor),
HybridListTile(
paddingTileTop: 16,
paddingTileBottom: 16,
paddingTileLeft: 16,
paddingTileRight: 16,
imagefromNetwork: Constants.imageUrl,
tileBackgroundColor: Colors.lightGreen,
borderTileColor: Colors.black,
borderTileRadius: 25.0,
splashTileColor: Colors.yellow,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Colors.cyanAccent,
overTitleLeft: 'Over title Bold ellispsis',
overTitleLeftColor: Colors.indigo,
overTitleLeftBold: true,
overTitleLeftOverflow: TextOverflow.ellipsis,
overTitleRight: 'Over right Right bold',
overTitleRightBold: true,
overTitleRightColor: Colors.yellow,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Colors.teal,
titleBold: true,
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
subtitleBold: true,
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left bold',
underSubtitleLeftColor: Colors.blueAccent,
underSubtitleLeftBold: true,
underSubtitleRight: 'Under subtitle right bold',
underSubtitleRightColor: Colors.black,
underSubtitleRightBold: true),
HybridListTile(
paddingTileTop: 16,
paddingTileBottom: 16,
paddingTileLeft: 16,
paddingTileRight: 16,
imagefromNetwork: 'Constants.imageUrl',
imagefromNetworkErrorColor: Colors.red,
imagefromNetworkBorder: Colors.blue,
tileBackgroundColor: Colors.pink,
borderTileColor: Colors.black,
borderTileRadius: 25.0,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Colors.cyanAccent,
overTitleLeft: 'Over title Bold ellispsis',
overTitleLeftColor: Colors.indigo,
overTitleLeftBold: true,
overTitleLeftOverflow: TextOverflow.ellipsis,
overTitleRight: 'Over right Right bold',
overTitleRightBold: true,
overTitleRightColor: Colors.yellow,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Colors.teal,
titleBold: true,
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
subtitleBold: true,
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left bold',
underSubtitleLeftColor: Colors.blueAccent,
underSubtitleLeftBold: true,
underSubtitleRight: 'Under subtitle right bold',
underSubtitleRightColor: Colors.black,
underSubtitleRightBold: true),
HybridListTile(
paddingTileTop: 16,
paddingTileBottom: 16,
paddingTileLeft: 16,
paddingTileRight: 16,
imageLeadingFromAsset: 'assets/images/Flutter.png',
tileBackgroundColor: Colors.lime,
borderTileColor: Colors.black,
borderTileRadius: 25.0,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Colors.cyanAccent,
overTitleLeft: 'Over title Bold ellispsis',
overTitleLeftColor: Colors.indigo,
overTitleLeftBold: true,
overTitleLeftOverflow: TextOverflow.ellipsis,
overTitleRight: 'Over right Right bold',
overTitleRightBold: true,
overTitleRightColor: Colors.yellow,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Colors.teal,
titleBold: true,
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
subtitleBold: true,
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left bold',
underSubtitleLeftColor: Colors.blueAccent,
underSubtitleLeftBold: true,
underSubtitleRight: 'Under subtitle right bold',
underSubtitleRightColor: Colors.black,
underSubtitleRightBold: true),
HybridListTile(
paddingTileTop: 16,
paddingTileBottom: 16,
paddingTileLeft: 16,
paddingTileRight: 16,
imageLeadingFromAsset: 'assets/images/Flutter.png',
imageLeadingFromAssetBorder: Colors.black,
tileBackgroundColor: Colors.grey,
borderTileColor: Colors.black,
borderTileRadius: 25.0,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Colors.cyanAccent,
overTitleLeft: 'Over title Bold ellispsis',
overTitleLeftColor: Colors.indigo,
overTitleLeftBold: true,
overTitleLeftOverflow: TextOverflow.ellipsis,
overTitleRight: 'Over right Right bold',
overTitleRightBold: true,
overTitleRightColor: Colors.yellow,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Colors.teal,
titleBold: true,
titleOverFlow: TextOverflow.ellipsis,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleOverFlow: TextOverflow.ellipsis,
subtitleBold: true,
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left bold',
underSubtitleLeftColor: Colors.blueAccent,
underSubtitleLeftBold: true,
underSubtitleRight: 'Under subtitle right bold',
underSubtitleRightColor: Colors.black,
underSubtitleRightBold: true),
HybridListTile(
paddingTileTop: 20,
paddingTileBottom: 20,
paddingTileLeft: 16,
paddingTileRight: 16,
tileBackgroundColor: Colors.blue,
borderTileColor: Colors.black,
outlinedColor: Styles.whiteColor,
overTitleLeft: 'Over tit Bold',
overTitleLeftColor: Styles.whiteColor,
overTitleLeftBold: true,
overTitleRight: 'Over right Right',
overTitleRightColor: Colors.pink,
title:
'Title by default is two lined but you can specify an title overflow to make it one lined',
needsTitleTwoLined: true,
titleColor: Styles.whiteColor,
subtitle:
'Subtitle by default is two lined but you can specify an overflow to make it one lined',
subtitleColor: Styles.whiteColor,
underSubtitleLeft: 'Under subtitle left',
underSubtitleLeftColor: Styles.whiteColor,
underSubtitleRight: 'Under subtitle right',
underSubtitleRightColor: Styles.whiteColor,
trailingIcon: Icons.arrow_forward_ios,
trailingIconSize: 30,
trailingIconColor: Styles.whiteColor,
splashTileColor: Colors.red,
borderTileRadius: 5.0,
subtitleOverFlow: TextOverflow.ellipsis,
needsSubtitleTwoLined: true)
]),
),
);
}
}