Skip to content

Instantly share code, notes, and snippets.

@israel-oye
Last active July 31, 2025 19:57
Show Gist options
  • Select an option

  • Save israel-oye/9e60e69954f8af510931a2b0a6aecf22 to your computer and use it in GitHub Desktop.

Select an option

Save israel-oye/9e60e69954f8af510931a2b0a6aecf22 to your computer and use it in GitHub Desktop.
Design recreation class with Flutter
// 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