- #1 Flutter + Dart Tips
- #2 Flutter + Dart Tips
- #3 Flutter + Dart Tips
- #4 Flutter + Dart Tips
- #5 Flutter + Dart Tips
16. Apply HitTestBehavior.opaque on GestureDetector to make the entire size of the gesture detector a hit region
If your GestureDetector isn't picking up gestures in a transparent/translucent widget, make sure to set its behavior to HitTestBehavior.opaque so it'll capture those events.
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: ()=>print('Tap!'),
child: Container(
height: 250,
width: 250,
child: Center(child: Text('Gesture Test')),
),
),Opaque targets can be hit by hit tests, causing them to both receive events within their bounds and prevent targets visually behind them from also receiving events.
Original source: Twitter
You can use kReleaseMode constant to check if the code is running in release mode or not.
kReleaseMode is a top-level constant from foundation.dart.
More specifically, this is a constant that is true if the application was compiled in Dart with the '-Ddart.vm.product=true' flag. (from https://api.flutter.dev/flutter/foundation/kReleaseMode-constant.html)
import 'package:flutter/foundation.dart';
print('Is Release Mode: $kReleaseMode');Want to set the background image to your Container? And you are using a Stack to do so? There is a better way to achieve this result. You can use decoration to set the image in the container.
Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://bit.ly/2oqNqj9'),
),
),
child: Center(
child: Text(
'Flutter.dev',
style: TextStyle(color: Colors.red),
),
),
),
You can provide Image according to your need, also you can use the box decoration properties to provide shape and border.
Use double quotes for nested strings or (optionally) for strings that contain single quotes. For all other strings, use single quotes.
final String name = 'Flutter And Dart Tips';
print('Hello ${name.split(" ")[0]}');
print('Hello ${name.split(" ")[2]}');
Do you know that you can throw your message when your assert fails?
assert() takes an optional message in which you can pass your message.
assert(title != null, "Title string cannot be null.");Plurals: Different languages have different rules for grammatical agreement with quantity. In English, for example, the quantity 1 is a special case. We write "1 book", but for any other quantity we'd write "n books". This distinction between singular and plural is very common, but other languages make finer distinctions.
You can use Plurals in your Dart string by using Intl package. The full set supported by Intl package is zero, one, two, few, many, and other.
- Add dependency:
dependencies:
intl: version- How to use:
import 'package:intl/intl.dart';
...
notificationCount(int howMany) => Intl.plural(
howMany,
zero: 'You don\'t have any notification.',
one: 'You have $howMany notification.',
other: 'You have $howMany notifications.',
name: "notification",
args: [howMany],
examples: const {'howMany': 42},
desc: "How many notifications are there.",
);
print(notificationCount(0));
print(notificationCount(1));
print(notificationCount(2));
- Output:
You don't have any notification.
You have 1 notification.
There are 2 notifications.
Use an Ink widget! The Ink widget draws on the same widget that InkWell does, so the splash appears. #FlutterFriday tweet by Flutter.dev.
Learn more here.
class InkWellCard extends StatelessWidget {
Widget build(BuildContext context) {
return Card(
elevation: 3.0,
child: Ink(
child: InkWell(
child: Center(
child: Text("Order Bagels"),
),
onTap: () => print("Ordering.."),
),
),
);
}
}You can use the print() function to view it in the system console.
If your output is too much, then Android sometimes discards some log lines.
To avoid this, you can use debugPrint().
You can also log your print calls to disk if you're doing long-term or background work.
Check out this Gist by Simon Lightfoot
Cascades Notation (..) allows chaining a sequence of operations on the same object. Besides, fields (data-members) can be accessed using the same.
class Person {
String name;
int age;
Person(this.name, this.age);
void data() => print("$name is $age years old.");
}
void main() {
// Without Cascade Notation
Person person = Person("Richard", 50);
person.data();
person.age = 22;
person.data();
person.name += " Parker";
person.data();
// Cascade Notation with Object of Person
Person("Jian", 21)
..data()
..age = 22
..data()
..name += " Yang"
..data();
// Cascade Notation with List
List<String>()
..addAll(["Natasha", "Steve", "Peter", "Tony"])
..sort()
..forEach((name) => print("\n$name"));
}Just wrap the widget with the Theme Widget and pass the ThemeData().
Theme(
data: ThemeData(...),
child: TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
validator: (String value) {
return value.contains('@')
? 'Do not use the @ char'
: null;
}
),
)Use below.
void main() {
bool isAndroid = true;
getDeviceType() => isAndroid ? "Android" : "Other";
print("Device Type: " + getDeviceType());
}Instead of this.
void main() {
bool isAndroid;
getDeviceType() {
if (isAndroid) {
return "Android";
} else {
return "Other";
}
}
print("Device Type: " + getDeviceType());
}What about using Timer.periodic
It will create a repeating timer, It will take a two-argument one is duration and the second is callback that must take a one Timer parameter.
Timer.periodic(const Duration(seconds: 2), (Timer time) {
print("Flutter");
});You can cancel the timer using the timer.cancel().
Check out the below article for detail information about this tip.
Apply style as a Theme in a Text widget
Text(
"Your Text",
style: Theme.of(context).textTheme.title,
),Adding = null is redundant and unneeded.
// Good
var title;
// Bad
var title = null;Want to add the separator in your Flutter ListView?
Go for the
ListView.separated();
The best part about separated is it can be any widget.😃
Check out the below image for the sample code.
ListView.seperated(
seperatorBuilder: (context, index) => Divider(),
itemBuilder: (BuildContext context, int index) => new ExampleNameItem(
exampleNames: names[index],
),
itemCount: names.length,
padding: new EdgeInsets.symetric(
vertical: 8.0,
horizontal: 8.0,
),
);While checking the null in the Dart, Use null-aware operators help you reduce the amount of code required to work with references that are potentially null.
// User below
title ??= "Title";
// instead of
if (title == null) {
title = "Title";
}