Diseño de un clon de whatsap en flutter
Hola a todos, este es un breve concepto de aplicación clon de Whatsapp en flutter
Main.dart:
import 'package:ejercicio_num_2/chat.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(const Myapp());
}
class Myapp extends StatelessWidget {
const Myapp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Tinder',
theme: ThemeData.dark(),
home: const Mywidget(),
);
}
}
class Mywidget extends StatelessWidget {
const Mywidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: const [
Icon(Icons.camera_alt_outlined),
SizedBox(
width: 20,
),
Icon(Icons.search),
SizedBox(
width: 18,
),
Icon(Icons.more_vert_outlined),
],
title: const Text(
"WhatsApp",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
),
body: const SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Column(
children: [
Divider(),
Myarchivados(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
Mychat(),
],
)
],
),
),
);
}
}
chat.dart:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Mychat extends StatelessWidget {
const Mychat({super.key});
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 30,
),
SizedBox(
width: 15,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Juana",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
Text(
"Hola, como estas?",
style: TextStyle(fontSize: 15.5),
)
],
)
],
),
],
),
);
}
}
class Myarchivados extends StatelessWidget {
const Myarchivados({super.key});
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.only(left: 30, top: 15, bottom: 15),
child: Column(
children: [
Row(
children: [
Icon(Icons.archive_outlined),
SizedBox(
width: 15,
),
Text(
"Archivados",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
)
],
)
],
),
);
}
}