Profile Page Screen - Flutter UI

Profile Page

Berikut ini adalah contoh  source code untuk Design Profile Page menggunakan flutter,  sebelumnya jangan lupa untuk membuat folder baru bernama assets, untuk menampung image yang akan kita panggil.  Kemudian deklarasikan file image tersebut dalam file pubspec.yaml, seperti berikut :

assets:
- profile.jpg



Main.dart
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'UI Profile',
home: new UIScreen(),
);
}
}

class UIScreen extends StatelessWidget {
Color gradientStart = Colors.orange[200]; //Change start gradient color here
Color gradientEnd = Colors.purple;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: <Widget>[
// background image and bottom contents
Column(
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [gradientStart, gradientEnd],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(50),
bottomLeft: Radius.circular(50))),
child: Center(
child: Text('Profile',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Colors.white,
fontStyle: FontStyle.italic)),
)),
Expanded(
child:Container(
margin:EdgeInsets.only(top:50),
child:Column(children: <Widget>[
new Center(
child:Text('Ali Blazing',style:TextStyle(fontSize:16)),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
elevation:20,
child: Container(
width:80,
child: Center(
child:Text('Folower\n  1000')
),
),
),
Card(
elevation:20,
child: Container(
width:80,
child: Center(
child:Text('Following\n  600')
),
),
),
Card(
elevation:20,
child: Container(
width:80,
child: Center(
child:Text('Likes\n  200')
),
),
)
],
),
Divider(height:1,color:Colors.grey),
Container(
height:100,
width: 350,
margin:EdgeInsets.only(top: 10),
child:ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Card(
elevation:20,
child:Container(
padding:EdgeInsets.all(20),
width:80,
child:Column(children: <Widget>[
Icon(Icons.person,color:Colors.purple),
Text('About')
],)
)
),
Card(
elevation:20,
child:Container(
padding:EdgeInsets.all(20),
width:80,
child:Column(children: <Widget>[
Icon(Icons.work,color:Colors.purple),
Text('Office')
],)
)
),
Card(
elevation:20,
child:Container(
padding:EdgeInsets.all(20),
width:80,
child:Column(children: <Widget>[
Icon(Icons.computer,color:Colors.purple),
Text('Skill')
],)
)
),
Card(
elevation:20,
child:Container(
padding:EdgeInsets.all(20),
width:80,
child:Column(children: <Widget>[
Icon(Icons.language,color:Colors.purple),
Text('Language',style: TextStyle(fontSize: 9))
],)
)
),
Card(
elevation:20,
child:Container(
padding:EdgeInsets.all(20),
width:80,
child:Column(children: <Widget>[
Icon(Icons.star,color:Colors.purple),
Text('Interest',style: TextStyle(fontSize: 10),)
],)
)
)
],
)
),
Divider(height:5),
Container(
margin:EdgeInsets.only(top: 30,left:5),
child:Column(children: <Widget>[
Row(children: <Widget>[
Text('Work Experience',style:TextStyle(color:Colors.purple,fontWeight:FontWeight.bold),)
],),
Row(children:<Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('- Design UI at ABC Company'),
Text('- Mobile Developer at KLM Company'),
Text('- IT Support at XYZ Company'),
Text('- Web Developer at TLM Company'),
],)                          
],)
],
),
)
]),
),
)
],
),
Positioned(
top:150,
child:Container(
height:100,
width: 100,
child:CircleAvatar(
backgroundImage: AssetImage('profile.jpg'),
),
))
],
),
);
}
}



Demo dari source code diatas dapat dilihat dalam video berikut


di Tidak ada komentar:
Label:

Capture Image - Flutter Tutorial


Dalam tutorial ini kita akan mendemonstrasikan sebuah imaga chapture di flutter, pada tutorial ini kita menggunakan plugins image_picker.

Tambahkan image_picker padd file puspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  image_picker:


ubah source code pada main.dart seperti berikut :

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(new MaterialApp(home: new CameraDemo()));
}

class CameraDemo extends StatefulWidget {
  @override
  _CameraDemoState createState() => _CameraDemoState();
}

class _CameraDemoState extends State<CameraDemo> {
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pick Image Galery'),
      ),
      body: Center(
        child: _image == null
            ? Text('Pick Image From Galery!')
            : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Select Image',
        child: Icon(Icons.image),
      ),
    );
  }
}


Pada baris kode dibawah ini merupakan  script yang digunakan untuk memanggil/menggunakan plugins imagepicker

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }


Untuk demo aplikasi dari code2 tersebut dapat dilhat dalam video berikut :


di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)

Profile Page Screen - Flutter UI

Profile Page Berikut ini adalah contoh  source code untuk Design Profile Page menggunakan flutter,  sebelumnya jangan lupa untuk membua...