Let’s learn about Flutter UI absolute positioning
When I tried to type on the keyboard in Flutter, the predefined UI would move up. To avoid this, I fixed the UI to an absolute position.
Daily Todos
- Fix the Word Input Window
- On the add word screen, control the SingleChildScrollView and add padding to fix the position.
- Setting up to save words on the same device
Why use a SingleChildScrollView?
Today we’re going to talk about the SingleChildScrollView, also known as the magic scroll. The reason for using it is very interesting: when the screen is small and we can’t see everything we need, it automatically creates a scroll so that we can see from top to bottom. This is especially important when the keyboard is blocking the screen. It makes it easy to see all the text fields and buttons we write on. However, there are times when this can be inconvenient, such as when the user has to do a lot of repetitive actions. For me, it can be very frustrating when I’m adding words repeatedly and the UI keeps going up and down.
Simple example for SingleChildScrollView
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SingleChildScrollView Example'),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 200,
color: Colors.red,
),
Container(
height: 200,
color: Colors.green,
),
Container(
height: 200,
color: Colors.blue,
),
Container(
height: 200,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.purple,
),
],
),
),
),
);
}
}In this example, we use a Column widget as the child of a SingleChildScrollView and place Container widgets with a height of 200 inside it. Because the total height of the child widgets is greater than the height of the screen, scrolling is automatically enabled. SingleChildScrollView can be useful when the size of the child widgets is larger than the size of the parent widget. For example, it is convenient to use SingleChildScrollView when you need to display long text or multiple widgets.
Modify code for Flutter UI absolute positioning
Instead of being responsive, we use MediaQuery to help us know the exact height of the screen, so we can place UI elements exactly where we need them (there’s no such thing as a Fluter UI absolute position, you can set it to be a third of the way up or down with padding). This way, when the keyboard is raised, the part the user needs to type doesn’t move, making it easier to iterate.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// Set 10% of screen height as top padding
double topPadding = MediaQuery.of(context).size.height * 0.1;
return SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: topPadding),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 50.0),
child: TextField(
controller: _wordController,
decoration: InputDecoration(
labelText: 'Type your word',
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
if (_wordController.text.isNotEmpty) {
translateWord(_wordController.text, _translationController);
}
},
),
border: UnderlineInputBorder(),
),
),
),
SizedBox(height: 50),
Padding(
padding: EdgeInsets.symmetric(horizontal: 50.0),
child: TextField(
controller: _translationController,
decoration: InputDecoration(
labelText: "Meaning",
border: UnderlineInputBorder(),
),
),
),
SizedBox(height: 20),
actionButtons(_wordController, _translationController),
],
),
),
);
},
);
Single child scroll view? flutter UI absolute positioning?
If you think about the pros and cons of SingleChildScrollView, there are many times when scroll responsiveness is really useful. Especially when you need to show a lot of information on a phone with a small screen. However, it can be annoying to have to scroll every time. On the other hand, using absolute and padding values, you can lock the UI exactly where you want it to be, which is much more convenient in certain cases. If the screen is laid out well in the first place, everything will be visible without scrolling. So it’s up to the designer to decide which method to use in which situation. You can use single-child scrolling views when you’re dealing with a lot of information on a small screen, and absolute values and padding when you need more stable and precise positioning.
What to do
- Matching Older Cotlin Versions with Flutter (Almost There)
- ✅ Web view
- ✅ Ability to add words to lists
- Word list UI (search button, kebab menu, numbering)
- Save it to your device and make it ready for real life
- Try it on Apple devices
- Add a toggle to hide words
- Include a word sorting feature
That’s all for now, take the challenge to create a store!
Related Posts
- Flutter UI: Absolute positioned element with fixed height and 100% width: This Stack Overflow post discusses how to create a Container with a fixed height and 100% width in Flutter, and how to offset this row a few pixels offscreen1.
- Position absolute for Flutter: Another Stack Overflow post where the user is trying to create a “drum kit” application and is looking for a way to set Drum Kit parts as it should be, similar to the position absolute option for the elements on the webpage in web development2.
- Flutter Widget Positioning – A Guide for the CSS Developer: This guide on Fireship.io provides a comparison between Flutter widgets and CSS for positioning, aligning, and building layouts3.
appdevelopment #androidstudio #plotter #developer