LAPORAN 9 PENGENALAN WIDGET PADA
NAMA : MUHAMMAD ZIDAN DIAS MAYAR
KELAS : BM 5A
1. Widget Pertama
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(
title: 'Hello World App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello, world!'),
),
body: const Center(
child: Text(
'Hello, world!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
Menambahkan Font Weight.bold
2. Stateless Widget
Sebelum Pencet Tombol Dan sesudah pencet Tombol
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(
title: 'Hello World App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _fontSize = 11;
void _increaseFontSize() {
setState(() {
_fontSize = 30.0; // Change to the desired larger font size
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello, world!'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello, world!',
style: TextStyle(
fontSize: _fontSize,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _increaseFontSize,
child: const Text('Perbesar'),
),
],
),
),
);
}
}
3. Stateful Widget
Dimana tombol bersfat dinamis tidak hanya bisa memperbesar saja tetapi bisa
memperkecil juga
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _fontSize = 24.0;
bool _isLarge = false;
void _toggleFontSize() {
setState(() {
if (_isLarge) {
_fontSize = 11; // Smaller font size
} else {
_fontSize = 30.0; // Larger font size
}
_isLarge = !_isLarge; // Toggle the state
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello, world!'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello, world!',
style: TextStyle(
fontSize: _fontSize,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleFontSize,
child: Text(_isLarge ? 'Perkecil' : 'Perbesar'),
),
],
),
),
);
}
}
4A. Scaffold
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(
title: 'Hello World App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _fontSize = 16.0;
bool _isLarge = false;
void _toggleFontSize() {
setState(() {
_fontSize = _isLarge ? 16.0 : 24.0;
_isLarge = !_isLarge;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
backgroundColor: Colors.blue, // Set AppBar color to blue
),
body: Center(
child: Text(
'Hello World!',
style: TextStyle(
fontSize: _fontSize,
fontWeight: FontWeight.bold,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _toggleFontSize,
backgroundColor: Colors.blue, // Set FAB color to blue (optional)
child: const Icon(Icons.add),
),
);
}
}
4B. AppBar
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(
title: 'Hello World App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: const Color.fromARGB(255,
255, 255, 255)),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _fontSize = 16.0;
bool _isLarge = false;
void _toggleFontSize() {
setState(() {
_fontSize = _isLarge ? 16.0 : 24.0;
_isLarge = !_isLarge;
});
}
void _navigateToNewPage() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondPage()),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
),
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.menu),
label: '',
),
BottomNavigationBarItem(
icon: Icon(Icons.rectangle_outlined),
label: '',
),
BottomNavigationBarItem(
icon: Icon(Icons.arrow_back),
label: '',
),
],
onTap: (index) {
if (index == 0) {
// Handle History navigation
} else if (index == 1) {
// Navigate to new white screen with same AppBar
_navigateToNewPage();
} else if (index == 2) {
// Go back to the previous screen
Navigator.pop(context);
}
},
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
),
body: const Center(
child: Text(
'This is a blank page with the same AppBar.',
style: TextStyle(fontSize: 18),
),
),
);
}
}
