Closed
Description
Text or Container border looks jagged on Android, normal on Apple.
Not all pages will be jagged, such as the following code, the comment Divider can be displayed normally.
Or modify the height of _Statistics to display normally. On my device height 10 or 86 reproduces the problem.
On my device this problem only occurs with scrollable components.
Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: CupertinoButton(
child: const Text('Click'),
onPressed: () {
Navigator.of(context).push(CupertinoPageRoute(
builder: (context) => const Page1(),
));
},
),
),
);
}
}
class Page1 extends StatelessWidget {
const Page1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: CustomScrollView(
slivers: [
const _Statistics(),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
margin: const EdgeInsets.fromLTRB(16, 0, 16, 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: const [
Text(
'BTC Staking',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
Text(
'0.2 BTC',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
Text(
'0 BTC Earns',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF35B589),
),
),
Text(
'0 BTC Earns',
style: TextStyle(
fontSize: 14,
color: Color(0xFF35B589),
),
),
Divider(),
],
),
);
},
childCount: 1,
),
),
],
),
);
}
}
class _Statistics extends StatelessWidget {
const _Statistics({super.key});
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: Container(
height: 10,
color: Colors.red,
),
);
}
}
Flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.0, on macOS 12.4 21F79 darwin-arm, locale
zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.70.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability
• No issues found!
Device
Brand: Xiaomi Civi
Screen size: 6.5 inch
Resolution: 2400 * 1080