String Concatenation is used to marge two or multiple string into single string. As we all know string a group of multiple characters with no limit in all programming language. In Dart combing two string into single string is very easy by using Plus ( + ) symbol. All we have to do is place a plus sign between two strings and save the strings into a variable using assign = equal operator. So in this tutorial we would Flutter Combine Concat Two Strings in Android iOS Dart Example Tutorial and Show the combined string on mobile string on application run time.
Contents in this project Flutter Combine Concat Two Strings in Android iOS Dart Example:
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 MyApp class extends StatelessWidget. This is our main Root class. In this class we would call 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("String Concat in Dart"), ), body: SafeArea( child : Center( child:NextWidget(), ) ) ), ); } } |
4. Creating another class named as NextWidget extends StatefulWidget. In this class we would make createState() method and pass StateNextWidget() class name along with it. This method would enable the mutable state in given class.
|
1 2 3 4 |
class NextWidget extends StatefulWidget { @override StateNextWidget createState() => StateNextWidget(); } |
5. Creating a class named as StateNextWidget extends State. This is our main Child class.
|
1 2 3 4 |
class StateNextWidget extends State<NextWidget> { } |
6. Creating 3 String variables named as one, two and three. Now we would assign some values to one and two.
|
1 2 3 |
String one = 'Hello'; String two = 'Guys'; String three ; |
7. Creating a function named as join(). Inside this function we would simply combine one and two variable with Plus sign and transfer both of them in Third variable. We would use here State block to make the change visible on mobile screen on app run time.
|
1 2 3 4 5 |
void join(){ setState(() { three = one + ' ' + two ; }); } |
8. Creating Widget Build area -> Text widget to display combined string and Raised Button widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Widget build(BuildContext context) { return Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$three', style: TextStyle(fontSize: 24),), RaisedButton( child: Text('Combine 2 Strings on Button Press'), onPressed: join, color: Colors.green, 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 |
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("String Concat in Dart"), ), body: SafeArea( child : Center( child:NextWidget(), ) ) ), ); } } class NextWidget extends StatefulWidget { @override StateNextWidget createState() => StateNextWidget(); } class StateNextWidget extends State<NextWidget> { String one = 'Hello'; String two = 'Guys'; String three ; void join(){ setState(() { three = one + ' ' + two ; }); } Widget build(BuildContext context) { return Center(child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$three', style: TextStyle(fontSize: 24),), RaisedButton( child: Text('Combine 2 Strings on Button Press'), onPressed: join, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], )); } } |
Screenshots:
