hybrid_list_tile 1.0.5

HybridListTile widget allows creating customized ListTiles with various properties like padding, colors, icons, titles, subtitles, and more.

example/lib/main.dart

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)
        ]),
      ),
    );
  }
}