Diseño de app de mensajes flutter
Hola a todos, este es un breve concepto de aplicación de mensajes en flutter
Main.dart:
import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";
import "package:flutter/widgets.dart";
import "package:tinder_clon/chat.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(
brightness: Brightness.dark,
),
home: Mywidget(),
);
}
}
class Mywidget extends StatelessWidget {
const Mywidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const IconButton(
icon: Icon(Icons.menu),
onPressed: null,
),
actions: const [
Icon(Icons.search),
],
title: const Text('Chat'),
centerTitle: true,
),
//Aca ira mi modo mensajes
//aca termina mi modo mensajes
body: const SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Mensajes',
),
SizedBox(
width: 30,
),
Text('Matches'),
],
),
SizedBox(height: 10), // Lo utilizo para hacer separaciones como el <br>
Column(
children: [
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
chatcito(),
],
),
],
),
),
);
}
}
chat.dart:
import 'package:flutter/material.dart';
class chatcito extends StatelessWidget {
const chatcito({super.key});
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 25,
),
SizedBox(
width: 15.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Rosa",
style:
TextStyle(fontSize: 17, fontWeight: FontWeight.bold)),
Text("Hola como estas?")
],
)
],
)
],
),
);
}
}
