Cool Detail Page Views in Flutter. Detail Page View with Card and Container List View in Flutter, Detail View in Flutter. Create Cool and Beautiful Detail Views in Flutter. Creating Card and Detail Views in Flutter. Flutter UI Card. Creating Views Quickly and Easily in Flutter. Script to Create a Profile Page in Flutter Quickly. Combining List View and Other Flutter Widgets, Creating a Professional Android Appearance, Flutter Template Design. Flutter List View Simple Design, Flutter Login Design Fresh & Modern, Flutter News Grid Design, Flutter Product List Grid View Page View, Flutter Vertical and Horizontal Scoll Design, Flutter Profile View
1. Create a new flutter project then copy the script below in lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Profile Page',
theme: ThemeData(primarySwatch: Colors.blue),
home: const ProfilePage(),
);
}
}
class ProfilePage extends StatefulWidget {
const ProfilePage({Key? key}) : super(key: key);
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.zero,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.33,
decoration: BoxDecoration(
// color: Colors.grey[400],
image: DecorationImage(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2019/04/12/16/52/city-4122550_1280.jpg'),
fit: BoxFit.cover),
),
),
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(left: 16, right: 16, top: 5, bottom: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Technology',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
SizedBox(
width: 5,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Tutorial',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
SizedBox(
height: 10,
),
Text(
'Creating a Beautiful Login page in Flutter using Restful Api',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w400),
),
SizedBox(
height: 10,
),
Row(
children: [
Container(
width: 25,
height: 25,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_640.png',
),
),
),
),
SizedBox(
width: 5,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Nabil Putra',
style: TextStyle(fontSize: 14),
),
Text(
'Publisher',
style: TextStyle(fontSize: 10),
),
],
),
],
),
SizedBox(
height: 20,
),
Text(
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n\n'
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\n\n'
'adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. \n\n'
'quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? \n\n'
'Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
style: TextStyle(fontSize: 16),
)
],
),
)
],
),
bottomNavigationBar: Container(
color: Colors.grey[200],
padding: EdgeInsets.symmetric(vertical: 8),
child: Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16
),
child: Row(
mainAxisAlignment: MainAxisAlignment
.spaceEvenly,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
padding: EdgeInsets.symmetric(horizontal: 16),
child: TextFormField(
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.top,
decoration: InputDecoration(
hintText: 'Type to Comment .....',
hintStyle: TextStyle(fontSize: 15),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal: 10,
),
),
),
),
),
SizedBox(width: 10),
Container(
height: 45,
width: 45,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25),
),
child: Center(
child: Icon(
Icons.favorite,
color: Colors.white,
size: 24,
),
),
),
SizedBox(width: 5),
Container(
height: 45,
width: 45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(25),
),
child: Center(
child: Icon(
Icons.share,
color: Colors.white,
size: 24,
),
),
)
],
),
),
),
);
}
}
2. Display when the script is run in the emulator. We use several widgets such
as stack, bottom navigation bar, container, button, card, column, row,
listview, wrap.
|
| Detail Page |
| Read Another Article ✨ |
| 📰 1. Flutter's Cool Vertical and Horizontal ListView Views read more |
| 📰 2.Cool Grid View Page Display in Flutter read more |
|
📰 3. Beautiful Chat Design Display Flutter Starter Template read more |
|
📰 4. Cool List Page Display in Flutter read more |
0 Comments
Come on ask us and let's discuss together
Emoji