I need some help on aligning my flutter app chat window design layout
The problem I have the input message box is in center instead of being on bottom down.
I want the input message box to be down on bottom like WhatsApp APP
Below is my script
I appreciate for any help Thanks
this is my full script am using visual studio
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Chat',
theme: ThemeData(
scaffoldBackgroundColor: Colors.black,
),
home: Scaffold(
appBar: AppBar(
title: const Text("Some url"),
actions: <Widget>[
//IconButton
IconButton(
icon: const Icon(Icons.logout_rounded),
onPressed: () {},
), //IconButton
], //<Widget>[]
backgroundColor: Colors.greenAccent[400],
elevation: 50.0,
leading: IconButton(
icon: const Icon(Icons.link_outlined),
onPressed: () {},
),
), //AppBar
body: Center(
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: 45,
width: MediaQuery.of(context).size.width,
color: Colors.black,
child: Row(
children: [
Expanded(
child: TextField(
cursorColor: Colors.white70,
style: const TextStyle(color: Colors.white70),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
filled: true,
fillColor: const Color.fromARGB(255, 27, 29, 35),
hintText: 'Message',
hintStyle: const TextStyle(
color: Colors.white24,
),
),
),
),
SizedBox(
width: 15,
),
// Send Button
MaterialButton(
color: Colors.white70,
onPressed: () {},
child: Icon(
Icons.send,
color: Colors.black,
size: 15,
),
shape: CircleBorder(),
padding: EdgeInsets.all(24),
),
],
),
),
),
),
),
);
}
}
The problem is that you're using the Center widget on the body, which does exactly what you'd expect: aligns its child to the center.
Instead you should align it to the bottomCenter:
...
body: Align(
alignment: Alignment.bottomCenter,
child: ...
BTW alignment is available on the Container widget as well.
But in this case, since I assume you'd want to add content in the page and keep the message bar on the bottom, you'd probably should be using a Column and have an Expanded widget as the parent of the first child in the list, and the bar as the other child. In this way everything under Expanded will take up the remaining space of the page above the message bar. For example:
body: Column(
children: [
Expanded(
child: Center(
child: Text("Main content goes here"),
),
),
Container(
height: 45,
width: MediaQuery.of(context).size.width,
color: Colors.black,
child: Row(
children: [
Expanded(
child: TextField(
cursorColor: Colors.white70,
style: const TextStyle(color: Colors.white70),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
filled: true,
fillColor: const Color.fromARGB(255, 27, 29, 35),
hintText: 'Message',
hintStyle: const TextStyle(
color: Colors.white24,
),
),
),
),
SizedBox(
width: 15,
),
// Send Button
MaterialButton(
color: Colors.white70,
onPressed: () {},
shape: CircleBorder(),
padding: EdgeInsets.all(24),
child: Icon(
Icons.send,
color: Colors.black,
size: 15,
),
),
],
),
),
],
),