Good things to read | O'qish uchun yaxshi narsalar 📰

I loved that! ✨

Flutterda shunday Bottom Navigation Bar yasash uchun nima qilgan bo'lar edingiz?

Bu kodda render objectlar ishlatilgan. Lekin o'zingiz soddaroq shaklda oddiy kalkulyatasiyalardan foydalanib ham qilishingiz mumkinmi? Agar ha bo'lsa, izohlarda kodlar bilan bo'lishing.

Bu yerda men ushbu widget kodlari va kodlarga ChatGPT ni qatorma-qator tushuntirishini keltirib o'taman:


To'liq kod:

import 'package:base/utils/app_constants.dart';
import 'package:flutter/material.dart';

class BottomNavCustom extends StatefulWidget {
final List<IconData> icons;
final Function(int) onItemSelected;
final Color backgroundColor;
final Color selectedCircleColor;
final Color selectedIconColor;
final Color unselectedIconColor;

const BottomNavCustom({
super.key,
required this.icons,
required this.onItemSelected,
this.backgroundColor = Colors.white,
this.selectedCircleColor = Colors.white,
this.selectedIconColor = cFirstColor,
this.unselectedIconColor = Colors.white,
});

@override
State<BottomNavCustom> createState() => _BottomNavCustomState();
}

class _BottomNavCustomState extends State<BottomNavCustom> {
int _selectedIndex = 0;
final List<GlobalKey> _iconKeys = [];

@override
void initState() {
super.initState();
_iconKeys.addAll(List.generate(widget.icons.length, (_) => GlobalKey()));
}


double _getIconCenterPosition(int index) {
try {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) setState(() {});
});

final RenderBox? iconBox = _iconKeys[index].currentContext?.findRenderObject() as RenderBox?;
final RenderBox? containerBox = context.findRenderObject() as RenderBox?;

if (iconBox == null || containerBox == null) return 0;

final iconPosition = iconBox.localToGlobal(Offset.zero, ancestor: containerBox);
final iconWidth = iconBox.size.width;
return iconPosition.dx + (iconWidth / 2) - 28; // 28 is half of circle size (56/2)
} catch (e) {
return 0;
}
}

@override
Widget build(BuildContext context) {
const circleSize = 56.0;

return Container(
height: 70,
width: 200,
decoration: BoxDecoration(
color: cFirstColor,
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
child: Stack(
children: [
// Animated white circle background
AnimatedPositioned(
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
left: _getIconCenterPosition(_selectedIndex),
top: 7,
child: Container(
width: circleSize,
height: circleSize,
decoration: BoxDecoration(
color: widget.selectedCircleColor,
shape: BoxShape.circle
),
),
),
// Icons Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(
widget.icons.length,
(index) => Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_selectedIndex = index;
});
widget.onItemSelected(index);
},
child: Container(
key: _iconKeys[index],
color: Colors.transparent,
child: Center(
child: Icon(
widget.icons[index],
color: _selectedIndex == index
? widget.selectedIconColor
: widget.unselectedIconColor.withOpacity(0.5),
size: 28,
),
),
),
),
),
),
),
],
),
);
}
}

Tushuntirish (Inglizcha)

Let me explain this function line by line:

```dart
double _getIconCenterPosition(int index) {

Function declaration - Takes an icon's index and returns its center position as a double (pixel value from left edge).

---

try {

Error handling - Wraps code in try-catch because accessing render objects can fail if widgets aren't built yet.

---

WidgetsBinding.instance.addPostFrameCallback((_) {
  if (mounted) setState(() {});
});

Post-frame callback - Schedules a rebuild after the current frame finishes rendering. This ensures that on first build (when positions aren't calculated yet), we trigger another build after layout is complete. mounted checks if the widget is still in the tree before calling setState().

---

final RenderBox? iconBox = _iconKeys[index].currentContext?.findRenderObject() as RenderBox?;

Get icon's RenderBox - A RenderBox is Flutter's low-level rendering object that knows the actual size and position of a widget. This line gets the RenderBox for the specific icon at index using its GlobalKey. The ? makes it nullable in case it doesn't exist yet.

---

final RenderBox? containerBox = context.findRenderObject() as RenderBox?;

Get container's RenderBox - Gets the RenderBox of the entire BottomNavCustom widget (the Stack container). We need this as a reference point.

---

if (iconBox == null || containerBox == null) return 0;

Safety check - If either RenderBox doesn't exist (widget not rendered yet), return 0 as a default position to prevent crashes.

---

final iconPosition = iconBox.localToGlobal(Offset.zero, ancestor: containerBox);

Calculate relative position - This is the KEY line:
- localToGlobal(Offset.zero) converts the icon's local coordinate (0,0 = top-left corner of icon) to a coordinate system
- ancestor: containerBox tells it to calculate position relative to the container (not the entire screen)
- Without ancestor, it would give screen coordinates, causing incorrect positioning
- Result: iconPosition.dx = pixels from container's left edge to icon's left edge

---

final iconWidth = iconBox.size.width;

Get icon width - Retrieves how wide the icon container is in pixels.

---

return iconPosition.dx + (iconWidth / 2) - 28;

Calculate center position:
- iconPosition.dx = distance from container's left to icon's left edge
- + (iconWidth / 2) = add half the icon's width to get to its center
- - 28 = subtract half the circle's size (56/2) so the circle's center aligns with the icon's center
- Returns the left position where the circle should be placed

---

} catch (e) {
  return 0;
}

Error fallback - If anything goes wrong (like accessing RenderBox before it exists), safely return 0 instead of crashing.

In summary: This function finds where each icon actually is on screen (relative to the bottom nav container) and calculates where to place the circle so it's perfectly centered under that icon.

#widget #renderObject #widgetTree

@flutterdevuz

Shu yerga kichik TweenAnimation qo'yib qo'ysak,
Ranglar silliqroq o'zgaradi.

Kod:

Container(
                    key: _iconKeys[index],
                    color: Colors.transparent,
                    child: Center(
                      child: TweenAnimationBuilder<Color?>(
                        duration: const Duration(milliseconds: 300),
                        tween: ColorTween(
                          begin: widget.unselectedIconColor.withOpacity(0.5),
                          end: _selectedIndex == index
                              ? widget.selectedIconColor
                              : widget.unselectedIconColor.withOpacity(0.5),
                        ),
                        builder: (context, color, _) {
                          return Icon(
                            widget.icons[index],
                            color: color,
                            size: 28,
                          );
                        },
                      ),
                    ),
                  )

Apple har doim apparat va dasturiy ta'minotni AQShda ishlab chiqarishni xohlagan. Uskuna ishlab chiqarishni AQShga qaytarishda qiyinchiliklar yuzaga kelganligi sababli, ular apparat qismlar Kaliforniyada dizaynlangan deb belgilashni boshlashdi. (AQSHda ishlab chiqarish soliqlari va ishchi kuchi qimmat).

Kupertinoda ishlaydigan innovatsion guruhni kengaytirish va e'tiborni yanada jalb qilish uchun ular Mac OS versiyasini Kaliforniya shtatining mashhur joylari bilan nomlashning ushbu yangi tendentsiyasini o'ylab topishdi. Bu Kaliforniya shtati turizmini targ'ib qiladi va boshqa jamoalarni AQShda ishlaydigan jamoa bilan bog'laydi.

Bundan avval MacOS nomlari katta yirtqich "mushuk" lar nomi bilan atalgan.

#apple #macos
@flutterdevuz

TL;DR;

Macda keshlarni tozalashga One-Liner buyruq (xavfsiz):

curl -fsSL https://raw.githubusercontent.com/jemishavasoya/dev-cleaner/main/dev-cleaner.sh -o dev-cleanup.sh && chmod +x dev-cleanup.sh && ./dev-cleanup.sh

===================

Dasturchilar sifatida barchamiz Mac kompyuterlarimizda "Diskingiz deyarli to'ldi" degan vahimali bildirishnomani ko'rganmiz. Niyatlarimizdan qat'iy nazar, dasturlash ishlari juda ko'p kesh fayllarini yig'adi va diskdan joyni jimgina yeb qo'yadigan artefaktlarni to'playdi.

O'tgan hafta mening MacBook Pro kompyuterim atigi 10 GB bo'sh joy bilan ishlayotgan edi. Turli xil tozalash usullarini sinab ko'rgandan so'ng, men do'stim Jemish Vasoya tomonidan yaratilgan ajoyib ochiq kodli vositani topdim, u atigi bitta buyruq bilan 80 GB joyni bo'shatdi!

Batafsil: https://parthvatalia.medium.com/devcleaner-the-one-click-solution-that-freed-up-80gb-on-my-mac-3598bb540863

@flutterdevuz

I have 6+ years of experience. And I still Googled how to center a Column in Jetpack Compose yesterday.

There is a toxic myth in our industry that "Senior" means "Encyclopedia."

Juniors who consult with me often come in terrified.

They think if they have to look up syntax, they are failing. They think if they don't have the entire Android documentation memorized, they aren't
"real" engineers.

Let’s be brutally honest:
The syntax is not the skill. The decision is the skill.
I don't get paid to memorize boilerplate code.
I get paid to know which architecture will survive the next 3 years of scaling.

I get paid to know when to use a Flow and when to use a simple callback.

I get paid to guide a team through the panic when production breaks.

If you are a Junior developer reading this:
Stop trying to memorize the dictionary. Start learning how to tell a story with your code.
Google the syntax. Chat with the AI. That’s fine.

But understand the system. Understand the why.

You can teach a machine to write code. You cannot teach a machine to care about the user experience or the long-term health of the product.

Be human first. Engineer second.

©️ Arsalan Peerzada, Mobile & Backend Engineer | Kotlin • Spring Boot • Flutter | Certified Trainer & Facilitator | Empowering Teams to Code with Purpose

@flutterdevuz

Flutter developers don’t fear bugs, they fear Null.

Ask any Flutter dev what keeps them up at night, and it’s not crashes, not layouts breaking, not weird API responses.

It’s one word:

Null.

Null in your model.
Null in your API payload.
Null sneaking into your layout.
Null destroying your whole build method with one silent strike.

Sound null safety didn’t remove the fear it just made the errors louder:

• LateInitializationError when you “swear it was initialized”
• Null check operator used on a null value (every dev’s jump scare)
• Async calls returning null on the first frame
• Optional fields that shouldn’t be null… but are
• UI collapsing because one width/height suddenly became null → NaN → chaos

Null doesn’t care how clean your code looks.
Null doesn’t care how perfect your UI is.
Null hits where you least expect it and usually right before pushing a build.

If you’ve been building real Flutter apps, you already know:

Null isn’t a value. It’s a threat.

@flutterdevuz

🚨 Your Flutter App is Bleeding Users (And You Don't Even Know It)

I just reviewed 100+ production Flutter apps, and 87% had at least 5 of these performance killers. Let's fix them in minutes, not days.

🎯 Your 5-Minute Action Plan :-
Today (15 minutes):
1. Run flutter run --profile and open DevTools
2. Find your biggest performance bottleneck
3. Add const to 5 widgets

This Week:
1. Replace one setState() with Provider/Riverpod
2. Add error handling to all async operations
3. Implement ListView.builder if using ListView

This Month:
1. Write tests for critical user flows
2. Profile app on the lowest-spec device you support
3. Implement proper image caching

📊 Apps with these optimizations see:
- ⚡️ 40-60% faster load times
- 📱 30% reduction in battery drain
- 🎯 25% increase in user retention
- ⭐️ 1.5 star rating improvement
Which mistake is hurting YOUR app the most? Drop a comment—I'll personally review your issue.

💡 What’s the dumbest bug you’ve ever shipped to production? Mine was leaving a print() statement in a loop that slowed the app to a crawl. 🐢

@flutterdevuz