Tampilan Detail Berita Keren di Flutter

Tampilan Halaman Detail Keren di Flutter. Tampilan Halaman Detail dengan Card dan Container List View di Flutter, Tampilan Detail di Flutter. Membuat Tampilan Detail Keren dan Cantik di Flutter. Membuat Tampilan Card dan Detail di Flutter. Flutter UI Card. Membuat Tampilan Cepat dan Mudah di Flutter. Script Membuat Profile Page di Flutter Secara Cepat. Penggabungan antara List View dan Widget Lain Flutter, Membuat Tampilan Android Profesional, Flutter Template Design. Flutter List View Simple Design, Flutter Login Design Fresh & Modern, Flutter News Grid Design, Tampilan Halaman Grid View List Product Flutter, Flutter Vertical dan Horizontal Scoll Design, Tampilan Profile Flutter

1. Buat sebuah project baru flutter lalu copy script di bawah ini di dalam 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], // Warna latar belakang bottom bar
          padding: EdgeInsets.symmetric(vertical: 8), // Padding atas dan bawah
          child: Padding(
            padding: const EdgeInsets.only(
              left: 16, 
              right: 16
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment
                  .spaceEvenly, // Penataan tombol dengan jarak yang sama
              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. Tampilan saat script di jalankan di emulator. Kita menggunakan beberapa widget seperti stack, bottom navigation bar, container, button, card, column, row, listview, wrap.