In Dart there are two inbuilt functions available to convert any type of string text to lower case and upper case using String.toLowerCase() and String.toUpperCase() function. These functions would directly apply on String and convert them to upper case and Lower case. In this tutorial we would create 2 functions to convert string to lower case and upper case. We would call these functions on Button onPress event. We would use State to show the changes on application run time on mobile screen. So in this tutorial we would Flutter Dart Convert String Text To Upper Case Lower Case Android iOS Example Tutorial.
Contents in this project Flutter Flutter Dart Convert String Text To Upper Case Lower Case Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root parent class named as MyApp extends StatelessWidget. In this class we would call our NextWidget class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Convert Text To Upper Case Lower Case"), ), body: SafeArea( child : Center( child:NextWidget(), ) ) ), ); } } |
4. Creating another class named as NextWidget extends StatefulWidget. In this class we would make the createState() method of State and pass NextState class name along with it to make the mutable state in given class.
|
1 2 3 4 |
class NextWidget extends StatefulWidget { @override NextState createState() => NextState(); } |
5. Creating or main Child class named as NextState extends State.
|
1 2 3 4 5 |
class NextState extends State { } |
6. Creating a String data type named as output with some random text string. We would convert this string to upper case and lower case.
|
1 |
String output = 'Hello Guys'; |
7. Creating a function named as convertToLowerCase() and convertToUpperCase() to make the Text into upper case and Lower case using String.toLowerCase() and String.toUpperCase() function.
|
1 2 3 4 5 6 7 8 9 10 11 |
void convertToLowerCase(){ setState(() { output = output.toLowerCase() ; }); } void convertToUpperCase(){ setState(() { output = output.toUpperCase() ; }); } |
8. Creating Widget Build Area -> Column widget -> Text widget and 2 Raised Button widgets. We would call both above functions on button onPress event.
|
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 |
Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('$output', textAlign: TextAlign.center, style: TextStyle(fontSize: 23))), RaisedButton( child: Text('Convert All Text to Upper Case'), onPressed: convertToUpperCase, color: Colors.redAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Convert All Text to Lower Case'), onPressed: convertToLowerCase, color: Colors.redAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ); } |
9. 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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Convert Text To Upper Case Lower Case"), ), body: SafeArea( child : Center( child:NextWidget(), ) ) ), ); } } class NextWidget extends StatefulWidget { @override NextState createState() => NextState(); } class NextState extends State { String output = 'Hello Guys'; void convertToLowerCase(){ setState(() { output = output.toLowerCase() ; }); } void convertToUpperCase(){ setState(() { output = output.toUpperCase() ; }); } Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('$output', textAlign: TextAlign.center, style: TextStyle(fontSize: 23))), RaisedButton( child: Text('Convert All Text to Upper Case'), onPressed: convertToUpperCase, color: Colors.redAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Convert All Text to Lower Case'), onPressed: convertToLowerCase, color: Colors.redAccent, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ); } } |
Screenshots:
