Flutter & Dart Tips - Week In Review #6

Hello Reader,

This is the 6th post of the Flutter & Dart Tips series. Below are the six tips I shared last week.

1- You can use InkWell to create a ripple effect to produce a visual experience for touch response.

InkWell(
    splashColor: Colors.red,
    onTap: () {},
    child: Card(
        elevation: 5.0,
        child: Text(
              ' Click This ',
              style: Theme.of(context).textTheme.headline2,
            ),
        ),
    ),

2- In the example below we are using BoxDecoration & DecorationImage to set a background image an App

@override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(image_Url),
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Title',
                style: const TextStyle(
                    color: Colors.white,
                    fontSize: 48,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      );
    }

3- You can use the ListWheelScrollView widget to build ListView in a scrollable wheel with 3D-effect as if the children are rotating in a wheel.

...

    List<Widget> items = [
        ListTile(
          leading: Icon(Icons.local_airport, size: 50),
          title: Text('Airport'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_convenience_store, size: 50),
          title: Text('Convenience Store'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_dining, size: 50),
          title: Text('Dining'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_drink, size: 50),
          title: Text('Drink'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_florist, size: 50),
          title: Text('Florist'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_gas_station, size: 50),
          title: Text('Gas Station'),
          subtitle: Text('Description'),
        ),
        ListTile(
          leading: Icon(Icons.local_grocery_store, size: 50),
          title: Text('Grocery Store'),
          subtitle: Text('Description'),
        ),
      ];

  ...

      Center(
          child: ListWheelScrollView(
              itemExtent: 75,
              children: items,
            )
    )

4- You can have a background color behind a text and add a curve at the start and the end.

Center(
      child: Text(
        'This is a very important text ',
        style: TextStyle(
            fontWeight: FontWeight.w600,
            color: Colors.white,
            fontSize: 20,
            background: Paint()
              ..strokeWidth = 30.0
              ..color = Colors.red
              ..style = PaintingStyle.stroke
              ..strokeJoin = StrokeJoin.round),
      ),
    )

5- Use the ready-made widget ‘AboutListTile’ to show an about box displaying extra information about the app like its Version, Privacy policy, Official website, etc.

....

    final List<Widget> aboutBoxChildren = <Widget>[
      SizedBox(
        height: 20,
      ),
      Text('App information'),
      Text('App Privacy Policy'),
      Text('App Terms of Service'),
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
                style: TextStyle(color: Theme.of(context).accentColor),
                text: 'Site URL'),
          ],
        ),
      )
    ];

.......

    drawer: Drawer(
      child: SingleChildScrollView(
        child: SafeArea(
          child: AboutListTile(
            icon: const Icon(Icons.info),
            applicationIcon: const FlutterLogo(),
            applicationName: 'Amazing About Example',
            applicationVersion: 'July 2021',
            applicationLegalese: '\u{a9} 2021 The Developer',
            aboutBoxChildren: aboutBoxChildren,
          ),
        ),
      ),
    ),

6- Use FittedBox to scale and fit the child widget inside. It restricts its child widgets from growing their size beyond a specific limit. It re-scales them according to the size available.

Center(
    child: Row(children: [
      Expanded(
        child: FittedBox(
            child: Text(
              "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
            maxLines: 1,
            style: TextStyle(fontSize: 23),
            ),
        ),
      ),
    ]))

See you next week. 👋🏻

Follow me on Twitter for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play

Cover image Mounzer Awad on Unsplash