Last active
July 31, 2025 19:57
-
-
Save israel-oye/9e60e69954f8af510931a2b0a6aecf22 to your computer and use it in GitHub Desktop.
Design recreation class with Flutter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Attempting to recreate the design at https://dribbble.com/shots/19117061-Baims-App-Design-Concept | |
| // lib/main.dart | |
| import 'package:flutter/material.dart'; | |
| import 'package:first_app/home_widget.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget{ | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(context){ | |
| return MaterialApp( | |
| home: HomeWidget(), | |
| ); | |
| } | |
| } | |
| // lib/home_widget.dart | |
| import 'package:flutter/material.dart'; | |
| class HomeWidget extends StatelessWidget { | |
| HomeWidget({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Column( | |
| children: [ | |
| Flexible( | |
| flex: 4, | |
| child: Container( | |
| width: double.infinity, | |
| height: 400, | |
| color: Color(0xFF13AF71), | |
| child: Image.asset('assets/img/avatar.png', width: 50,), | |
| ), | |
| ), | |
| Flexible( | |
| flex: 6, | |
| child: Container( | |
| width: double.infinity, | |
| color: Color(0xFFFBF3EC), | |
| child: Padding( | |
| padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 28), | |
| child: Column( | |
| children: [ | |
| TextField( | |
| decoration: InputDecoration( | |
| labelText: 'Name', | |
| filled: true, | |
| fillColor: Colors.white, | |
| ), | |
| ), | |
| TextField( | |
| decoration: InputDecoration( | |
| labelText: 'Name', | |
| filled: true, | |
| fillColor: Colors.white, | |
| ), | |
| ), | |
| TextField( | |
| decoration: InputDecoration( | |
| labelText: 'Name', | |
| filled: true, | |
| fillColor: Colors.white, | |
| ), | |
| ), | |
| TextField( | |
| decoration: InputDecoration( | |
| labelText: 'Name', | |
| filled: true, | |
| fillColor: Colors.white, | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
| // Full solution here: https://gist.github.com/israel-oye/b5a687b14e116a9b4be840320c49b129 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment