I decided to write the client in Flutter framework because it allows you to create multi-platform applications. However I have no idea how the framework and the language Dart worked so it took sometime to learn the basics.
Now to build the layout of the landing page, I tried to use the conceptual example used in the flutter introduction page. Based on that I drew how the basic front-end should look like.
The landing page should look like something like this:
Then I tried to map this layout into the Column/Row concept that was introduced in the Flutter doc.
So this looks easy enough that I have one column and 4 rows.
The 4 rows are:
1. Cat Picture
2. Text field for IP address
3. Text field for Name
4. Button to enter
The code below shows how this Row/Column concepts translates to Flutter/Dart code.
class _LandingPageForumState extends State<LandingPageForum> {
final ipAddressController = TextEditingController();
final usernameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
(1) ImageSection(image: 'images/avatar_1.jpg'),
(2) Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
controller: ipAddressController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter IP address',
),
),
),
(3) Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
controller: usernameController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter your username',
),
),
),
(4) Padding(
padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 16),
child: FloatingActionButton(
onPressed: () {
String combinedText = ipAddressController.text + usernameController.text;
Navigator.push(context,
MaterialPageRoute(builder: (context) => const UserListings()));
},
child: const Icon(Icons.save)
),
)
],
);
}
}
I have numbered the Rows in the code above so that it's easier to visualize what is going on.
After flutter compilation, the application shows the exact layout we drew conceptually:
They style however is not very clean, but I will improve it in the upcoming posts.
The full code can be found here
Comments
Post a Comment