There are so much conditions in mobile application development where developer wants to control which widget he wants to display on certain condition. These type of functionality is called as Controlling widgets using conditional statements. There are several type of conditional statement is present in languages like If-Else, nested If-Else and Switch case statement. So far we cannot directly use any conditional statement in Widget build return code but using custom widget build method we can easily Flutter Use Conditional Statement in Child Widget Container widget, Center widget and any other widgets.
What we are doing in this tutorial:
We are creating custom Widget in our class and putting a If-Else conditional statement in our Widget. We are checking the device OS name using Platform package class. We would call this Widget in Center widget directly in Widget build area.
Contents in this project Flutter Use Conditional Statement in Child Widget Container Center Android iOS Example Tutorial:
1. Import material.dart and dart:io package in your app’s main.dart file.
|
1 2 3 |
import 'package:flutter/material.dart'; import 'dart:io' show Platform; |
2. Creating void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root View class named as MyApp extends StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating a Custom Widget named as _detectOS() using Widget keyword. The Widget keyword would enable a complete View Widget interface for flutter app and we can directly pass the widget name in any child attribute of Container, Center, Row, Column or any other widget. In this widget we would check the Operating system of mobile device using Platform package. If the device is Android then it would display the Android Device OS Detected text and if the device is iOS then it will display the iOS Device OS Detected text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Widget _detectOS() { if (Platform.isAndroid) { return Container( width: 150.00, color: Colors.green, padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Android Device OS Detected', textAlign: TextAlign.center, style: TextStyle(fontSize: 24, color: Colors.white))); } else if (Platform.isIOS) { return Container( width: 150.00, padding: EdgeInsets.fromLTRB(20, 20, 20, 20), color: Colors.blueAccent, child: Text('iOS Device OS Detected', textAlign: TextAlign.center, style: TextStyle(fontSize: 24, color: Colors.white))); } } |
5. Creating Widget Build are in MyApp class and we would define the Center widget inside Scaffold widget. We would call the _detectOS() widget as Child of Center widget.
|
1 2 3 4 5 6 7 8 9 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: _detectOS() ), ) ); } |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import 'package:flutter/material.dart'; import 'dart:io' show Platform; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget _detectOS() { if (Platform.isAndroid) { return Container( width: 150.00, color: Colors.green, padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('Android Device OS Detected', textAlign: TextAlign.center, style: TextStyle(fontSize: 24, color: Colors.white))); } else if (Platform.isIOS) { return Container( width: 150.00, padding: EdgeInsets.fromLTRB(20, 20, 20, 20), color: Colors.blueAccent, child: Text('iOS Device OS Detected', textAlign: TextAlign.center, style: TextStyle(fontSize: 24, color: Colors.white))); } } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: _detectOS() ), ) ); } } |
Screenshot in Android device:
Screenshot in iOS device:
